4.1 了解 V-bind指令
在之前,我们已经了解过v-bind的基本用法和以及它的语法糖,主要用法是动态更新HTML元素上的属性。
在数据绑定中,最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定,它们也是HTML的属性,因此可以使用V-bind指令。我们只需要v-bind计算出表达式最终的字符串就可以了,不过有时候表达式的逻辑比较复杂,使用字符串拼接方法难以阅读和维护,所以Vue.js加强了对class和style的绑定。
4.2 绑定class的几种方式
4.2.1 对象语法
给 v-bind:class 设置一个对象,可以动态的切换class,例如:
<body>
<div id="app">
<div :class="{'active':'isActive'}" ></div>
</div>
<script src="js/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
isActive:true;
}
})
</script>
</body>
上例中,类名active依赖于数据isActive,当其为true时,div会拥有类名active,为false时,则没有。
当class的表达式过长或者逻辑复杂时,还可以绑定一个计算属性,这是一种很友好和常见的用法,一般当条件多于两个的时候,都可以使用data或者computed。
4.2.2 数组语法
当需要多个class的时候,可以使用数组语法,给class绑定一个数组,应用一个class列表 ,也可以用三元表达式根据条件来切换class。
三元运算符:
如名字表示的三元运算符需要三个操作数。
语法是 条件 ? 结果1 : 结果2;
这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。
使用计算属性给元素动态设置类名,在业务中经常遇到,尤其是在写复用的组件时,所以在开发过程中,如果表达式较长或者逻辑复杂,硬尽可能的使用计算属性。
4.3 绑定内联样式
使用v-bind:style(即:style)可以给元素绑定内联样式,
方法和:class相似,也有对象语法和数组语法,看起来很像直接在元素上写css。
<body>
<div id="app">
<div :style="{'color':color,'fontSize';fontSize+'px'}">文本</div>
</div>
<script src="js/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
color:'red',
fontSize:15
}
})
</script>
</body>
css属性名称使用驼峰命名,或者短横分隔命名。
大多数情况下,直接写一长串的样式不利于阅读和维护,所以一般写在data或者computed里,以data为例子,改写上面的例子。
<body>
<div id="app">
<div :style="styles">文本</div>
</div>
<script src="img/js/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
styles:{
color:'red',
fontSize:15
}
}
})
</script>
</body>