第6集丨Vue 江湖 —— Class 与 Style 样式绑定

操作元素的 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>