Vue之 class和style绑定

class 与 style 绑定

操作元素的 class 列表和内联样式是数据绑定的常见需求。因为它们都是 attribute，用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

如果不使用 class

对HTML中的DOM进行操作。1.获取事件源（标签）2.事件 3.事件驱动js代码

绑定HTML Class

对象语法

// active 这个 class 存在与否将取决于数据 property isActive 的 truthy。
// truthy（真值）指的是在布尔值上下文中，转换后的值为真的值
// 所有值都是真值，除非( false、0、""、null、undefined 和 NaN ）。
1
 

// v-bind: class 可以和普通的 class属性并存 
2
  

// 绑定对象


// 返回对象的计算属性

data: {
    classObject: {
    active: true,
    'text-danger': false
  },
    isActive: true,
    error: null
},
computed: {
    classObject: function () {
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal'
        }
    }
}

数组语法

// 把一个数组传给 v-bind


// 三元表达式


// 在数组中使用对象

data: {
    activeClass: 'active',
    errorClass: 'text-danger'
}

用在组件上

        
        
        


Vue.component('my-view', {
            template: '
Hi
'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true
            },
})

绑定内联样式

是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

如果不使用 v-bind

对象语法

data: {
    activeColor: 'red',
    fontSize: 30
}

// 绑定到一个样式对象,对象常常结合计算属性

data: {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
}

数组语法

// 数组语法可以将多个样式对象应用到同一个元素上

自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀

多重值

// 渲染数组中最后一个被浏览器支持的值