vue v-bind绑定class属性

使用 vue 的 v-bind 指令绑定 class 属性的值。

v-bind 指令被用来响应地更新 HTML 属性。常用来设置 class、style等等。语法规则如下:

<span v-bind:class="classProperty"></span >

其中:v-bind 是 vue 的指令,: 后面的 class 是参数,classProperty 是我们预期要设置的值。

开发中,v-bind 写起来比较繁琐。vue 提供了缩写语法:

<span :class="classProperty"></span >

:”后面的 class 是参数,classProperty  是我们预期要设置的值。

class 绑定对象

下面实例将展示 v-bind:class 使用对象来绑定 class 属性。实例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>学习 VUE 框架</title>
    <script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
    <style type="text/css">
        .normal {font-size: 18px; font-weight:bold;}
        .active {color: #26b955;}
        .under-line {border-bottom: solid 3px red;}
    </style>
</head>
<body>
<div id="app">
    <p v-bind:class="{ active: isActive, 'under-line': underLine }"></p>
    <p v-bind:class="classObject"></p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            isActive: true,
            underLine: false,
            classObject: {
                active: true,
                'under-line': false
            }
        }
    });
</script>
</body>
</html>

其中:

(1) v-bind:class="{ active: isActive, 'under-line': underLine }" 中,如果 isActive 为 true,则为元素添加 active 样式。如果 underLine 为 true,则为元素添加 under-line 样式。

(2) v-bind:class="classObject" 中的 classObject 在 vue 对象的 data 域中定义的一个对象。

注意:上面两种方式效果一样,均给 <p> 元素添加了 class,class 为 "normal active"。

当然,我们也可以使用缩写语法来实现。DOM代码如下:

<div id="app">
    <p :class="{ active: isActive, 'under-line': underLine }"></p>
    <p :class="classObject"></p>
</div>

class 绑定数组

下面实例将展示 v-bind:class 指令使用数组来绑定 class 属性。实例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>学习 VUE 框架</title>
    <script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
    <style type="text/css">
        .normal {font-size: 18px; font-weight:bold;}
        .active {color: #26b955;}
        .under-line {border-bottom: solid 3px red;}
    </style>
</head>
<body>
<div id="app">
    <p v-bind:class="[normal, active, underLine]">
        我们可以把一个数组传给 v-bind:class,以应用一个 class 列表</p>
    <p v-bind:class="[normal, isActive ? active : '', underLine]">
        我们可以把一个数组传给 v-bind:class,以应用一个 class 列表</p>
    <p v-bind:class="[normal, {active: isActive}, underLine]">
        我们可以把一个数组传给 v-bind:class,以应用一个 class 列表</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            isActive: false,
            normal: 'normal',
            active: 'active',
            underLine: 'under-line'
        }
    });
</script>
</body>
</html>

上面实例使用 v-bind:class="[normal, isActive ? active : '', underLine]" 指定多个 class 值,其中 isActive ? active : '' 是一个三目运算符,如果 isActive 为 false,则 class 为空。

锲而舍之,朽木不折;锲而不舍,金石可镂。——《荀子·劝学》
0 不喜欢
说说我的看法 -
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号