写在前面

---

其实这个方式vue.js官网就有，而且记录的挺详细的，如果想更清楚的了解请移步vue.js Class 与 Style 绑定
作者把官网的记录在这里，是为了方便自己总结与学习。

首先说一下绑定方式有三种,前两中写那种方式都行。

第一种：
<div v-bind:class="{ active: isActive }"></div>
第二种：
<div :class="{ active: isActive }"></div>
第三种：直接绑定style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

然后在具体说说如何绑定的，在项目中使用

• 一，可以给:class传一个对象，这样就可以动态切换class:

<div v-bind:class="{ active: isActive }"></div>
<script>
export default {
 data() {
        return {
                  isActive: true,
         }
    }
}
</script>
上面的语法表示，active这个class是否起作用取决与isActive是true还是false.

• 二， 还可以给:class传多个对象，中间以逗号隔开，就好了

<div  v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<script>
export default {
 data() {
        return {
                  isActive: true,
                  hasError: false
         }
    }
}
</script>

• 三， 还可以给把这写条件放到一个对象里，

<div  v-bind:class="classObject"></div>
<script>
export default {
 data() {
        return {
                  classObject: {
                    active: true,
                   'text-danger': false
                      }
         }
    }
}
</script>
这样写跟上边的效果是一样的，只不过在标签里看着更简洁，也方便维护

• 四，数组语法，

写到这就想起在项目中经常用到,用来展示某个值是什么颜色或者样式

三元运算符经常用到

 <div class="mask" :class=" isActive ? 'on' : ' '  "></div>

            <li v-for="(item,i) in lotterylist" :key="i">
                        <div class="box">
                            <p><img :src="item.img"></p>
                            <p>{{item.title}}</p>
                        </div>
                 //这里就是动态的绑定div的样式
                        <div class="mask" :class="i == index ? 'on' : ''"></div>
                    </li>

下边就说说还可以直接绑定内联样式v-bind:style

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<script>
export default {
 data() {
        return {
               activeColor:"blue",
               fontSize:"40"
         }
    }
}
</script>