vue ---------- v-bind 绑定class

v-bind

• v-bind 指令被用来响应地更新 HTML 属性

• v-bind:href 可以缩写为 :href;

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

绑定对象

• 我们可以给v-bind:class 一个对象，以动态地切换class。

• 注意：v-bind:class指令可以与普通的class特性共存

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

1、 v-bind 中支持绑定一个对象     如果绑定的是一个对象 则 键为 对应的类名  值 为对应data中的数据 <!--     HTML最终渲染为 <ul class="box textColor textSize"></ul>     注意：         textColor，textSize  对应的渲染到页面上的CSS类名         isColor，isSize  对应vue data中的数据  如果为true 则对应的类名 渲染到页面上             当 isColor 和 isSize 变化时，class列表将相应的更新，         例如，将isSize改成false，         class列表将变为 <ul class="box textColor"></ul> -->   <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">     <li>学习Vue</li>     <li>学习Node</li>     <li>学习React</li> </ul>   <div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div>   <sript> var vm= new Vue({     el:'.box',     data:{         isColor:true,         isSize:true，         activeColor:"red",         activeSize:"25px",     } }) </sript> <style>       .box{         border:1px dashed #f0f;     }     .textColor{         color:#f00;         background-color:#eef;     }     .textSize{         font-size:30px;         font-weight:bold;     } </style>

　　

绑定class

2、  v-bind 中支持绑定一个数组    数组中classA和 classB 对应为data中的数据

这里的classA  对用data 中的  classA
这里的classB  对用data 中的  classB
<ul class="box" :class="[classA, classB]">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>
<script>
var vm= new Vue({
    el:'.box',
    data:{
        classA:‘textColor‘,
        classB:‘textSize‘
    }
})
</script>
<style>
    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>

 

绑定对象和绑定数组 的区别

• 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据

• 绑定数组的时候数组里面存的是data 中的数据