vue中动态控制class

1.直接绑定对象（一）

<div id="app">
        <p class="static" :class="{red: isRed, blue:isBlue}">昨天再好也回不去，明天再难也要抬脚继续～</p>
</div>
<script>
    var watchExampleVM = new Vue({
        el: '#app',
        data: {
            isRed: true,
            isBlue: false
        },
        methods: {}
    })
</script>

渲染结果为：

<p class="static red">昨天再好也回不去，明天再难也要抬脚继续～</p>

2.直接绑定对象（二）

<div id="app">
    <p class="static" :class="classObj">昨天再好也回不去，明天再难也要抬脚继续～</p>
</div>
<script>
    var watchExampleVM = new Vue({
        el: '#app',
        data: {
            classObj: {
                isRed: false,
                isBlue: true
            }
        },
        methods: {}
    })
</script>

渲染结果为：

<p class="static blue">昨天再好也回不去，明天再难也要抬脚继续～</p>

3. 计算属性绑定对象（三）

<div id="app">
    <p class="static" :class="classObj">昨天再好也回不去，明天再难也要抬脚继续～</p>
</div>
<script>
    var watchExampleVM = new Vue({
        el: '#app',
        data: {
            isRed: true,
            isBlue: false
        },
        computed: {
            classObj() {
                return {
                    red: this.isRed,
                    blue: this.isBlue
                }
            }
        },
        methods: {}
    })
</script>

渲染的结果为：

<p class="static red">昨天再好也回不去，明天再难也要抬脚继续～</p>

4.数组方式

<div id="app">
    <p :class="[isRed ? 'red' : '', 'static']">昨天再好也回不去，明天再难也要抬脚继续～</p>
</div>
<script>
    var watchExampleVM = new Vue({
        el: '#app',
        data: {
            isRed: true
        },
        methods: {}
    })
</script>

渲染的结果为：

<p class="red static">昨天再好也回不去，明天再难也要抬脚继续～</p>

5.数组加对象方式

<div id="app">
    <p :class="[{ red: isRed }, 'static']">昨天再好也回不去，明天再难也要抬脚继续～</p>
</div>
<script>
    var watchExampleVM = new Vue({
        el: '#app',
        data: {
            isRed: true
        },
        methods: {}
    })
</script>

渲染的结果为：

<p class="red static">昨天再好也回不去，明天再难也要抬脚继续～</p>