在 原生 JS 中可以通过 classList.add() 和 classList.remove() 这两个方法来动态的增加和删除元素的 class，也可以通过 style 属性来动态的改变元素的样式。在 Vue 中不太推荐直接操作 DOM 元素，但可以给元素的 class 和 style 绑定数据，只需要改变数据就能实现改变 class 和 style 。

class

对象语法

可以给 v-bind:class 绑定一个对象，只需要更改对象的值就能实现增加和删除 class 。

如下：

<template>
  <div id="app">
    <button 
      v-bind:class="{active: isActive}" 
      @mousedown="active" 
      @mouseup="active"
    >
      按钮
    </button>
  </div>
</template>
export default {
  name: "app",
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    //  鼠标按下和松开
    active() {
      this.btnActive = !this.btnActive
    }
  }
}
.active {
  background: #ff0000;
  color: #ffffff;
}

上面的 button 绑定了 isActive 的值，只要 isActive 为 true ，active 的 class 就会生效，否则 active 的 class 就会被删除。在 CSS 中 active 又包含一些样式，只要 active 生效，样式也会生效。

button 还绑定了 mousedown 鼠标按下和 mouseup 鼠标松开 两个事件，两个事件都绑定了 active 方法。鼠标按下 active 就会生效，鼠标放开 active 就会失效。

注意！v-bind:class 和 class 属性可以同时存在，但是属性值不能相同。

建议把需要动态改变的 class 放在 v-bind:class 中，不需要改变的 class 可以直接放在 class 属性中。

数组语法

v-bind:class 除了能绑定对象外也能绑定数组，如下：

<template>
  <div id="app">
    <button v-bind:class="classArr">按钮</button>
  </div>
</template>
export default {
  name: "app",
  data() {
    return {
      classArr: ["active", "btn", "red"]
    }
  }
}

上面的代码会被渲染为：

<button class="active btn red">按钮</button>

只需要改变数组的内容就能更改 class 。

在数组中也能使用对象语法。

如下：

<template>
  <div id="app">
    <button v-bind:class="classArr">按钮</button>
  </div>
</template>
export default {
  name: "app",
  data() {
    return {
      classArr: [
        {active: true},
        'btn',
        'red'
      ]
    }
  }
}

最终会被渲染为：

<button class="active btn red">按钮</button>

只要 active 为 true ，active 就会被渲染。

style

对象语法

style 也可以使用 v-bind:style 来设置。

如下：

<template>
  <div id="app">
    <button 
      v-bind:style="btnStyle" 
      @click="changeColor"
    >
      按钮
    </button>
  </div>
</template>
export default {
  name: "app",
  data() {
    return {
      btnStyle: {
        color: 'red',
        fontSize: '16px'
      }
    }
  },
  methods: {
    changeColor() {
      this.btnStyle.color = 'blue'
    }
  }
}

上面的 button 绑定了 btnStyle 对象，button 的 click 事件绑定了 changeColor 方法，changeColor 的功能就是改变 color 。button 被点击后 btnStyle 中的 color 就会改变，button 的样式也会改变。

也可以在 v-bind:style 中直接写样式。

如下：

<template>
  <div id="app">
    <button v-bind:style="{fontSize: size, backgroundColor: color}">按钮</button>
  </div>
</template>
export default {
  name: "app",
  data() {
    return {
      size: 18 + 'px',
      color: 'blue'
    }
  }
}

style 样式名可以使用驼峰式 backgroundImage 或 短横线 background-image 分隔，如果使用短横线的话，样式名需要用引号包裹。

数组语法

v-bind:style 也可以绑定数组，数组中可以包含多个样式对象。

如下：

<template>
  <div id="app">
    <button v-bind:style="[btnFont, btnMargin]">按钮</button>
  </div>
</template>
export default {
  name: "app",
  data() {
    return {
      btnFont: {
        fontSize: '16px',
        fontFamily: '微软雅黑'
      },
      btnMargin: {
        marginTop: '20px',
        marginLeft: '50px'
      }
    }
  }
}

上面的代码会渲染为：

<button style="font-size: 16px; font-family: 微软雅黑; margin-top: 20px; margin-left: 50px;">按钮</button>

相关文章：