第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>

2.2 效果

上面案例，最终的效果如下图所示：