标签：设置 一个 直接 hello 结果 答案 必须 active 支持
今天我们学习内容为 “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 的内联样式。
标签：设置 一个 直接 hello 结果 答案 必须 active 支持
原文地址：https://www.cnblogs.com/Edwords-blog/p/13367620.html
