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

1.用法

数组中的所有类名都会被绑定到class上

<p :class="[类名1，类名2，类名3]"></p>

举例：

    <div id="app">
       <!-- 数组中元素是字符串-->
        <p :class="['active','line']">Hello</p>      
    </div>

image.png

上面这种方法不常用，这和直接在行间添加class类名的效果完全相同
一般用于需要动态获取传递过来的类名

    <div id="app">
        <!--数组中的元素是变量-->
        <p :class="[active,line]">Hello</p>      
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                active : 'aaaaa',
                line : 'bbbbb'
            }
        })
    </script>

image.png

2.简化行间代码

class获取的类名用函数返回

    <div id="app">
        <p :class="getClasses()">Hello</p>      
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                active : 'aaaaa',
                line : 'bbbbb'
            },
            methods : {
                getClasses : function() {
                    return [active,line];
                }
            }
        })
    </script>