Vue入门：v-bind

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

1. 绑定 class 的几种方式

1.1 对象语法

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

html代码：
<div id="app">
    <!-- 绑定class：对象语法 -->
    <div v-bind:class="{divStyle: isActive}">我是class 对象语法</div>
    <!-- 点击按钮背景色 红 蓝 切换 -->
    <button v-on:click="changeColor" :class="{initStyle: isInit, otherStyle: isOther}">点我换背景色</button>
    <!-- 绑定class：计算属性 -->
    <div v-bind:class="classNames">我是class 计算属性</div>
</div>

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：数组语法 -->
    <div v-bind:class="[divClass,borderClass]">我是class 数组语法</div>
    <!-- 绑定class：对象 数组语法混用  -->
    <div v-bind:class="[{initStyle:isInit},borderClass]">我是class 对象数组混用</div>

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代码：
<!-- 绑定内联样式：对象语法 -->
<div v-bind:style="{'color': color,'fontSize': fontSize+'px'}">我是style 对象语法</div>

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

这里是在线代码地址