注意在自定义组件上绑定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>
