【VUE实战】学习笔记（三）

1. v-bind指令：
   作用：用于动态更新HTML上的属性，当数据变化时，就会重新渲染。
   缩写:v-bind:class=“xxxx” 等于:class=“xxxx”

2. 绑定class的几种方式：

• 受控方式

  <div class="container" :class="{'red':isRed ,’ error ’:isError}">
    <a v-bind:href="url">点击跳转</a>
    <button @click="switchClassHandler">切换class</button>
  </div>
...

  data: () => {
    return {
        url:"http://www.baidu.com",
        isRed:false，
        isError：false
    };
  },

可以看出:

1. 'red’是否起作用是受控于isRed属性的值。
2. 第二个值得注意的地方是，class和:class是可以共存的。
3. class中可以放入多个受控class.:class="{'red':isRed ,’ error ’:isError}"。
4. 绑定计算属性,注意冒号后方为true时前方class才会生效：

<div class="box" :class="classes"></div>
...

  computed: {
    classes: function() {
      return {
        green: this.isRed
      };
    }
  }