Vue的学习 ---Cap4

Posted 2020-12-18 edwords-blog

今天我们学习内容为 “class与style绑定”。

最直观的class与style的绑定在之前的插值 ---v-bind 的时候就有提到过，为了加深印象，我们在把最基础的用法拿出来看一下。

<div id="app" :class="{active:isActive}"
   style="width: 200px;height: 200px;text-align: center;line-height: 200px;">
     Hello vue!!!
   </div>

var data = {
    seen: true,
    isActive: true,
}
var vm = new Vue({
    el: ‘#app‘,
    data:data,
})

此时，如果你去按下F12到编辑者工具栏里看的话，你会 发现 div 会被一个名为：active 的class给绑定，而active是否生效，完全取决于active后面的值 isActive，如果就像我在data对象里设置的一样，true，active这个类就会生效，若为false那么结果就是active这个类不会绑定到div上。

同时，我们还可以不止绑定一个类，在大括号里可以绑定多个类，例如：

<div id="app" :class="{active:isActive,text_style:textOn}"
   style="width: 200px;height: 200px;text-align: center;line-height: 200px;">
     Hello vue!!!
   </div>

如你所见，在active后面又多了一个text_style的class，这给予了我们更大的操作空间。

此外，v-bind（上面代码中直接简写为了 “：”，不明白的去看Cap3) 的存在是可以和普通的class共存的。例如：

<div id="app" 
   class="newClass"
   :class="{active:isActive,text_style:textOn}"
   style="width: 200px;height: 200px;text-align: center;line-height: 200px;">
     Hello vue!!!
   </div>

v-bind还支持数组模式，看代码：

<div id="app" 
   class="newClass"
   :class="[‘active‘,‘text_style‘]"
   style="width: 200px;height: 200px;text-align: center;line-height: 200px;">
     Hello vue!!!
   </div>

在数组里，active和text_style是不存在true和false两种真值的。并且他们还必须被引号所标注。

难道在数组模式下就没法实现控制这两钟属性的真值了吗？No，答案是可以的。还记得三元运算符吗，（ok?‘yes‘,‘no‘）同样，我们可以在数组里面也添加这个算法，请看代码：

<div id="app" 
   class="newClass"
   :class="[isActive?‘active‘:‘‘,textOn?‘text_style‘:‘‘]"
   style="width: 200px;height: 200px;text-align: center;line-height: 200px;">
     Hello vue!!!
   </div>

这样写是完全没用问题的，因此，目前为止我们已经可以看出v-bind这个指令的强大之处了，他能令我们在html的节点里为所欲为，是不是很强大，开不开心，意不意外？

好了，言归正传。那么同理，我们也可以把实现动态控制style的内联样式，具体请看代码

<div id="boom"
   :style="{color:color,fontSize:size}">
      Hello World!!!
   </div>

var boomData = {
    color: "red", 
    size: "50px"
}
var vmBo = new Vue({
    el: ‘#boom‘,
    data: boomData
})

这里我们就可以通过javascript的功能来操纵div的内联样式了。

同理也能使用三元运算符来对color和fontSize的真值取法，和上面的几乎一模一样，我也就不细说了。

好了，今天学的基本就是这些了，我学会了动态捆绑class类名，和动态控制style 的内联样式。