Vue 动态绑定CSS样式

一.示例1

1. 首先准备一些css样式，在这个示例中我们将展示通过点击动态修改颜色。
2. vue对象中有两个数据，changeColor和changeLength值都为false。
3. 回到html文档中，在div中绑定属性，v-bind:class="{}"一个对象，changetheColor : changeColor。由于此时changeColor在vue中的值为false，所以changetheColor此时为无效属性。

4. 添加点击事件@click，changeColor = !changeColor，点击使得changeColor的值从false变为true。

   
   
   
   

二. 示例2

1. 在这里，我们给div绑定的属性class="compClasses"，是以computed计算属性传进来的对象，此时由于changeColor和changeLength值都为false，所以changetheColor和changetheLength都是无效属性。
2. 同样，创建两个button，每个button都添加点击事件，changeColor = !changeColor，changeLength = !changeLength。点击使得changeColor，changeLength的值从false变为true。

3. 即可实现点击按钮，动态变换css样式