class 对象绑定方式
<template>
<div>
<p :class="{red: hasColor, fontSize: hasFontSize}">class对象绑定</p>
<p :class="classStyle">class对象绑定</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
hasColor: true,
hasFontSize: true,
classStyle: {
red: true,
fontSize: false
}
};
},
};
</script>
<style>
.red {
color: red;
}
.green {
color: green;
}
.fontSize {
font-size: 30px;
}
</style>
class 数组绑定方式
<template>
<div>
<p :class="[hasColor ? 'red' : 'green', hasFontSize ? 'fontSize' : '']">class数组语法1</p>
<p :class="[redClass, fontSize]">class数组语法2</p>
<p :class="[hasFontSize ? 'fontSize' : '' , { red: hasColor }]">class数组语法3</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
hasColor: true,
hasFontSize: true,
redClass: 'red' ,
fontSize: 'fontSize'
};
},
};
</script>
<style>
.red {
color: red;
}
.green {
color: green;
}
.fontSize {
font-size: 30px;
}
</style>
style的 对象和数组 绑定方式
<template>
<div>
<p
style="border: 1px solid green"
:style="{ color: isColor ? 'red' : '', fontSize: '28px' }"
>
style对象语法
</p>
<p :style="[{color: 'red'}, {fontSize: '28px'}]">style数组语法</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isColor: false,
};
},
};
</script>
