注意在自定义组件上绑定class会添加到该组件的根元素上面
1.对象语法
- 传入class对象
- v-bind:class 指令也可以与普通的 class attribute 共存
- 可以动态修改class的值
- 可以绑定一个计算数据来实现
1.传入class对象
<script src="./vue.js"></script>
<div id="app" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<script>
new Vue({
el:"#app",
data(){
return {
isActive:true,
hasError:true
}
}
});2. v-bind:class 指令也可以与普通的 class attribute 共存
<div id="app" class="checked" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
3.可以动态修改class的值
<script src="./vue.js"></script>
<div id="app" class="checked" @click="changeClass" v-bind:class="{ active: isActive, 'text-danger': hasError }">这是测试div</div>
<script>
new Vue({
el:"#app",
data(){
return {
isActive:true,
hasError:true
}
},
methods:{
changeClass(){
this.isActive = !this.isActive;
}
}
});4.可以绑定一个计算数据来实现
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}2.数组语法
- 传入一个数组
- 可以使用三元表达式
- 数组中也可以使用对象语法
传入一个数组
div v-bind:class="[activeClass, errorClass]"></div>可以使用三元表达式
<div v-bind:class="[isActive ? 'active' : '', 'text-danger']"></div>数组中也可以使用对象语法
<div v-bind:class="[{ active: isActive }, 'text-danger']"></div>3.绑定内联样式
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
<div v-bind:style="{ color: red, fontSize: 30 + 'px' }"></div>
