Vue第二天学习

## *Class与Style的绑定**

  *** 作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

1.我们给v-bind:class传一个对象，以动态的形式切换class，代码如下，
**,** isActive是布尔值, if(isActive==true)div的类就是active,反之，div的类为空。
         
2.我们给v-bind:class传一个数组，以动态的形式切换class，当这个数组是常量数组的时候代码如下 ，
，这样写直接给dom元素添加了两个类hover与yellow
当这个数组是里面的属性值是变量的时候，我们需要在创建的Vue对象里面声明属性的值具体代码如下

 const myVueJs=new Vue({
            el:"#app",
            data(){
                return{
                    hover:"hover",
                    yellow:"yellow"
                }
            }
        })
        

3.我们将v-for和v-bind结合使用，代码如下

       
           
                            @click="getStyle(index)">
                {{index}}--{{item}}
           
                            @click="getStyle(index)">{{index}}--{{item}}
       
   
   
   
    
4.将v-bind动态绑定style对象，代码如下
 
       
        我是中国人
   
   
   

5.将v-bind动态绑定style数组，数组的属性是对象，代码如下

   
   
   
   
   

   
        niaho
   
   
   

6.我对vue对象的理解，代码上的注释说明如下
!DOCTYPE html>

   
   
   
   
   

   
       
           
                            v-bind:>{{index}}--{{item}}