v-bind 绑定 class 官方文档提炼
v-bind 绑定 class 有两种语法, 1. 数组语法 2. 对象语法; 其中 数组语法是包含对象语法的
对象语法
v-bind:class="{ active: isActive,'text-danger': hasError }"
双引号里面是一个对象 属性名即预备的 CSS 类 其值为真值 则应用这个类
同时 它 (classObject) 也可也传一个返回如对象语法格式的返回值的函数 // 注意: 它是在 computed 中定义
- <div v-bind:class="classObject"></div>
- data: {
- isActive: true,
- error: null
- },
- computed: {
- classObject: function () {
- return {
- active: this.isActive && !this.error,
- 'text-danger': this.error && this.error.type === 'fatal'
- }
- }
- }
关于这个函数内部变量改变后动态执行 classObject 如下解释
computed 用来监控自己定义的变量, 该变量不在 data 里面声明, 直接在 computed 里面定义, 然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;
computed 比较适合对多个变量或者对象进行处理后返回一个结果值, 也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化, 举例: 购物车里面的商品列表和总金额之间的关系, 只要商品列表里面的商品数量发生变化, 或减少或增多或删除商品, 总金额都应该发生变化. 这里的这个总金额使用 computed 属性来进行计算是最好的选择
数组语法
数组语法中 传递一个数组
- <div v-bind:class="[activeClass, errorClass]"></div>
- data: {
- activeClass: 'active',
- errorClass: 'text-danger'
- }
数组中的值默认为真 如果你想让某些属性为假 可以传递如同对象语法中的对象
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
里面的对象按照对象语法解析, 所以 数组语法是可以包含对象语法的
值得一提的是 ,v-bind:class 指令也可以与普通的 class 属性共存.
- <div
- class="static"
- v-bind:class="{ active: isActive,'text-danger': hasError }"
- ></div>
这个 static 类与后面动态类共存.
来源: http://www.jianshu.com/p/0af93a907a7d