操作元素的 class
列表和内联样式
是数据绑定的一个常见需求。因为它们都是 attribute
,所以我们可以用 v-bind
处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind
用于 class
和 style
时,Vue.js
做了专门的增强。表达式结果的类型除了字符串
之外,还可以是对象
或数组
。
一、class绑定
写法:class="xxx"
,其中xxx
可以是字符串(str)
、对象(obj)
、数组(arr)
字符串
写法适用于:类名不确定,要动态获取对象
写法适用于:要绑定的样式个数确定,名字也确定,但要动态决定用不用,数组
写法适用于:要绑定的样式个数不确定,名字也不确定
1.1 字符串
其中:divClass:"normal"
,最终会将样式拼接到class
中,即:class="basic normal"
<div class="basic" :class="divClass" @click="changeClass">{{name}}
1.2 数组
其中:divClassArr:['div1','div2','div3']
,最终会将样式拼接到class
中,即:class="basic div1 div2 div3"
<div class="basic" :class="divClassArr">{{name}}</div>
1.3 对象
其中: divClassObj:{ 'div1':false, 'div2':true }
,
- 为
false
的样式不会生效 - 最终会将样式拼接到
class
中,即:class="basic div2"
<div class="basic" :class="divClassObj">{{name}}</div>
1.4 完整案例
<style>
.basic{height: 100px;width: 300px;padding: 10px;border: 1px solid #ccc;margin-bottom: 10px;}
.normal{font-size: 14px;}
.happy{background-color:bisque;}
.sad{background-color: pink;}
.div1{border-radius: 10px;}
.div2{background-color: coral;}
.div3{font-size: 20px;}
</style>
<div id="root">
<!-- 绑定class样式---字符串写法,适用于:样式的类名不确定,需要动态指定 -->
<div class="basic" :class="divClass" @click="changeClass">{{name}}</div>
<!-- 绑定class样式---数组写法,适用于:要绑定的样式个数不确定,名字也不确定 -->
<div class="basic" :class="divClassArr">{{name}}</div>
<!-- 绑定class样式---对象写法,适用于:要绑定的样式个数确定,名字也确定,但要动态决定用不用 -->
<div class="basic" :class="divClassObj">{{name}}</div>
</div>
<script>
new Vue({
el:'#root',
data:{
name:'我们一起去吃南京大排档吧!',
divClass:"normal",
divClassArr:['div1','div2','div3'],
divClassObj:{
'div1':false,
'div2':true
}
},
methods: {
changeClass(){
const arr = ['happy','normal','sad']
// 生成随机数函数[0-1)
// Math.floor:向下取整
this.divClass = arr[Math.floor(Math.random()*3)];
}
},
})
</script>
最终生存的结构如下:
二、style绑定
写法:style="xxx"
,其中xxx
可以是对象(obj)
、数组(arr)
:style="{fontSize:xxx}"
其中xxx
是动态值- 对象:
:style="styleObj"
- 数组:
:style="[styleObj,styleObj2]"
、:style="styleArr"
2.1 案例
<div id="root">
<!-- 绑定style样式:对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div>
<!-- 绑定style样式: 数组写法 -->
<div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
<div class="basic" :style="styleArr">{{name}}</div>
</div>
<script>
new Vue({
el:'#root',
data:{
name:'我们一起去吃南京大排档吧!',
styleObj:{
fontSize:'30px'
},
styleObj2:{
borderRadius:'10px'
},
styleArr:[{
fontSize:'30px'
},{
borderRadius:'10px'
}]
}
})
</script>
2.2 效果
上面案例,最终的效果如下图所示: