前端笔记Vue项目day1(五）

 

绑定对象

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

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

• [AppleScript] 纯文本查看 复制代码

  ?

  01 02 03 04 05 06 07 08 09 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

• [AppleScript] 纯文本查看 复制代码

  ?

  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

  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 中的数据