Vue入门：v-bind

本篇为Vue的基础篇，主要关于 v-bind: class与style的动态绑定。

1. 绑定 class 的几种方式

1.1 对象语法

给 v­-bind:class 设置一个对象，可以动态地切换 class，对象里的 key是类名，value 对应 true ,false。

html代码：

    
    
我是class 对象语法
    
    点我换背景色
    
    
我是class 计算属性

JavaScript 代码：
var app = new Vue({
  el: '#app',
  data: {
    isActive: true,
    isInit: true,
    isOther: false
  },
  methods:{
    changeColor: function(){
      this.isOther = !this.isOther
    }
  },
  computed: {
    classNames: function(){
      return {
        divStyle: this.isActive
      }
    }
  }
})

1.2 数组语法

数组成员直接对应className--类名，数组中的每个成员都会在 data属性中定义。

html代码：
    
    
我是class 数组语法
    
    
我是class 对象数组混用

JavaScript 代码：
var app = new Vue({
  el: '#app',
  data: {
    isActive: true,
    isInit: true,
    isOther: false,
    isBorder: false,
  //数组语法
    divClass: 'divStyle',
    borderClass: 'borderStyle',
  }
})

2. 绑定内联样式

使用 v-­bind:style （即：style） 可以给元素绑定内联样式，方法与 ：class 类似，也有对象语法和数组语法（不常用）。

注意 : css 属性名称使用驼峰命名（ came!Case ）或短横分隔命名（ kebab-­case）

html代码：

我是style 对象语法

JavaScript 代码：
var app = new Vue({
  el: '#app',
  data: {
    isActive: true,
    isInit: true,
    isOther: false,
    isBorder: false,
  //数组语法
    divClass: 'divStyle',
    borderClass: 'borderStyle',
  //内联语法
    color: 'red',
    fontSize: 16
  }
})

这里是在线代码地址