Vue - 动态绑定Class 与 Style

Posted 2021-06-17 WHOVENLY

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue - 动态绑定Class 与 Style相关的知识，希望对你有一定的参考价值。

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

一、绑定Class

1.对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div class="box" :class="{active:isActive}"></div>

var app = new Vue({
    el: "#app",
    data: {
        isActive: false,
    },
});

是否为元素添加active类名，取决于isActive的值，在本例中isActive的值为false，所以并为对该元素添加active类名，所以最终渲染结果如下：

<div class="box"></div>

也可以对象中传入更多字段来动态切换多个 class，例如：

<div class="box" :class="{active1:isActive1,'active2':isActive2}"></div>

var app = new Vue({
    el: "#app",
    data: {
        isActive1: true,
        isActive2: false,
    },
});

在本例中isActive1的值为true，所以成功为该元素添加active1类名，isActive2的值为false，所以并未对该元素添加active2类名，所以最终渲染结果如下：

<div class="box active1"></div>

2.三目运算符语法

如果想根据条件切换列表中的 class，可以用三元表达式：

<div class="box" :class="isActive3?'active1':'active2'"></div>

var app = new Vue({
    el: "#app",
    data: {
        isActive3: false,
    },
});

如果isActive3的值为true，则为元素添加类名active1，如果为false，则为元素添加类名active2，在本例中isActive3的值为false，所以应为该元素添加active2类名，所以最终渲染结果如下：

<div class="box active2"></div>

3.数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div class="box" :class=[activeClass1,activeClass2]></div>

var app = new Vue({
    el: "#app",
    data: {
        activeClass1:'active1',
        activeClass2:'active2',
    },
});

渲染为：

<div class="box active1 active2"></div>

如果你也想根据条件切换列表中的 class，可以与三元表达式配合使用：

<div class="box" :class="[activeClass3,isActive4?'active4':'']"></div>

var app = new Vue({
    el: "#app",
    data: {
        isActive4: false,
        activeClass3:"active3"
    },
});

渲染为：

<div class="box active3"></div>

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

<div class="box" :class="[activeClass3,{active4:isActive4}]"></div>

二、绑定Style

1.对象语法

<div class="con" :style="{color:myColor,fontSize:myFontSize + 'px'}"></div>

var app = new Vue({
    el: "#app",
    data: {
        myColor: "pink",
        myFontSize: 20,
    },
});

注意点：CSS property 名需要使用驼峰式来命名。如上例中的font-size属性需要改写为fontSize；如果属性值为数值带有单位的，需要将数值和单位分开写，如上例的20px，需将数字20赋值到myFontSize变量中，而在使用+符号添加上px单位。
为了让模板更加清晰，通常我们会直接绑定到一个样式对象上，如下所示：

<div v-bind:style="styleObject"></div>

var app = new Vue({
    el: "#app",
    data: {
        styleObject: {
          color: "pink",
          fontSize: "20px",
        },
    },
});

2.数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[styleObject, overridingStyles]"></div>

var app = new Vue({
    el: "#app",
    data: {
        styleObject: {
          color: "pink",
          fontSize: "20px",
        },
        baseStyles: {
            backgroundColor:'skyblue'
        },
    },
});