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','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里处理
  • 数组里加单引号会把变量名当做字符串处理，不加时当做变量来处理
    在这里插入图片描述
posted @ 2020-08-15 18:46  兮动人  阅读(163)  评论(0)  编辑  收藏  举报