1-9 Class与style的绑定

对象语法

class与style的绑定主要用到 v-bind 指令，也可简写成“：”。

vue的class和style绑定的方法很多，可以通过单个变量，对象，数组，计算属性，三木运算来绑定class和style。介绍几种常用方法.他的绑定是非常灵活的，只要，想的通基本都可以实现。详细了解可以，去官网进行学习查看。

<!--HTML部分-->

<!--第一种办法-->

<!--写法一-->
<p v-bind:class="{active:isActive}">如果isActive为true你就可以看到我变成红色了！</p>

<!--写法二-->
<!--可以同时加载多个class通过不同的变量值来判断他是否添加该class,如下写法-->
<p v-bind:class="{active:isActive，‘demo’:Demo}">如果isActive为true你就可以看到我变成红色了！</p>


<!--第二种办法-->
<!--也可以用对象的方式绑定-->
<p v-bind:class="styobj">可以写在对象里面控制class是否添加</p>



<!--根据数据给当前列表添加class-->
<!--这种效果还是比较常用的，因为vue本身就是数据驱动页面模式-->
<!--这里的意思是循环一个列表，当前的列表的下标对2进行取余为0的话，那么就给当前的列表添加active这个class样式，反之，就不添加-->
    <ul>
      <li :class="[{active:index%2 == 0}]" v-for="(name,index) in names">{{name}}</li>
    </ul>

//js部分
export default{
name:"style",
data(){
return{
active:true,
"demo":true，
styobj:{
active:true,
"demo":true
},
 names:["dd","bb","cc","ee"]
}
}
}

/*css部分*/
 .active{
   color: red;
 }
 . demo{
   background: blue;
 }