Vue之v-bind动态绑定class(数组语法)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><h2 class="title" :class="['active','

兮动人

2796人浏览 · 2020-08-15 18:46:26

兮动人 · 2020-08-15 18:46:26 发布

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
            <h2 class="title" :class="['active','line']">{{message}}</h2>
           <h2 class="title" :class="[active,line]">{{message}}</h2>
           <h2 class="title" :class="getClasses()">{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
            const app = new Vue({
                el: '#app',
                data: {
                    message: 'hello vue',
                    active: 'aaaa',
                    line: 'bbbb'
                },
                methods: {
                    getClasses: function () {
                        return [this.active, this.line]
                    }
                }
            })
    </script>
</body>
</html>

当类多的时候可以把类放在一个数组里。
变量多的时候也可以放在methods里处理
数组里加单引号会把变量名当做字符串处理，不加时当做变量来处理

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^