Vue 动态绑定CSS (CDN)

1. 要使用的类，直接放在标签中

style.css

span{
    display: inline-block;
    padding: 20px;
    background: chartreuse;
    border: 1px solid #ccc;
    font-size: 20px;
    text-align: center;
    line-height: auto;
}

.colorClass{
    background: red;
}

.lengthClass::after{
    content: "Vue";
}

app.js

new Vue({
    el: "#app-test",
    data: {
        //这里设置是否使用colorClass、textClass类
        changeColor: true,
        changeText: false
    }
})

index.html

    

        
        
            Hello
        
        
        变色
        加字
    

这种方法可能会比较耗费性能,如果用的比较多还是放在计算属性中

效果图：

动态绑定CSS.gif

2.通过计算属性方式

app.js

new Vue({
    el: "#app-test",
    data: {
        //这里设置是否使用colorClass、textClass类
        changeColor: true,
        changeText: false
    },
    computed: {
        classChange() {
            //这里注意要使用this
            return { colorClass: this.changeColor, textClass: this.changeText }
        }
    }
})

css
和第一个一样

index.html

    

        
        
            Hello
        
        
        变色
        加字