VueJs Class 与 Style 绑定 数组语法

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

应用介绍

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

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

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为:

<div class="active text-danger"></div>

如果你也想根据条件切换列表中的 class,可以用三元表达式:

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

这样写将始终添加 errorClass,但是只有在 isActive 是 truthy[1] 时才添加 activeClass。


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

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

演示案例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Class 与 Style 绑定->绑定HTML CLASS 对象语法</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="static" v-bind:class="[activeClass, errorClass]">activeClassOne</div>
            <div class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">activeClassTwo</div>
            <div class="static" v-bind:class="[{ active: isActive }, errorClass]">activeClassThree</div>
        </div>
        <script type='text/javascript'>
            var app = new Vue({
                el: '#app',
                data: {
                  activeClass: 'active',
                  errorClass: 'text-danger',
                  isActive: true,
                }
            });
        </script>
        <style>
            .static{
                color: #333;
                padding: 0.5rem;
                margin: 0.1rem;

            }
            .text-danger{
                color: #ff3b1d;
            }
            .active{
                background:#f5f5f5;
            }
        </style>
    </body>
</html>

点赞(2) 打赏

立即下载

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部