vue学习资料二（类和样式的绑定）

VUE

类的绑定方式一：对象绑定方式

语法：

   v-bind:class="{className:isShow}"

className依然在style中设置，isShow映射在data中，名称自定义，值为true则加上这个类，如果为false则不加上这个类；
举例：

    {{value}}

这个例子可以看到color的值为true，所以文字被渲染成了红色，而bgColor的值为false，所以在页面中没有看到这个类bg-green;

类的绑定方式二：数组绑定方式

• 数组绑定，这样能让后端传递更多的值；
• 语法：

   v-bind:class="[color,bg]"

数组每个值映射data的属性名称，data的属性的值就是style的class名；
举例：

    {{value}}

• 注意data每个属性的值只能传递一个类；

鼠标事件小例子

当鼠标进入一个盒子，显示另一个盒子，当鼠标离开，另一个盒子隐藏；
例子：

    博客
    

        
博客评论
        
未读提醒
    

• 这里我们使用了类的绑定方式二，数组绑定一个isShow，映射到data的isShow，第一次插值为空，当操作dom事件让isShow为我们定义好的.show;

样式的绑定方式一：对象绑定方式

同类的对象绑定方式一样,但有些不同

• 语法

    v-bind:style="{key:value}"

举例：

    {{value}}

绑定多个：

    {{value}}

• 可以看到和类的绑定有明显不同的地方就是，v-绑定的对象里面，

1. key是样式中的key值，这个和类的对象绑定不同，类的对象绑定的key是className；
2. value映射data中的key值，这个和类的对象绑定一样；
3. data中的value值就是样式的value值，而类的对象绑定是布尔值；

样式的绑定方式二：数组绑定方式

语法大致一样，不过在data中不一样
语法：

    v-bind:style="[style1,style2]"

举例：

    {{value}}

• 从上面可以看到数组中font和size映射data中的key值，data中key的value是一个对象，里面的键值对来设置style样式；而类的数组绑定方式中，data中的value值是css样式表里面的className，是一个字符串，且不能多个，不能有空格;

• 以上针对类和样式的对象和数组绑定方式务必熟悉，切莫混淆；

小练习

由于还没有学习到事件方法，就用原生的事件绑定来完成以下练习：
类似于淘宝页面选择鞋子商品的颜色，然后会弹出尺码供选择的一个交互效果；
主要是练习上述的类和样式的绑定；

    

        颜色
        粉色
        橘色
        咖啡色
        深蓝色
    
    

        选择尺码
        280
        260
        270
        290