vue动态样式绑定class/style怎么写

简介：

绑定样式：
1、class样式
写法：class="xxx" xxx可以是字符串，对象，数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数确定，名字确定，但不确定用不用。
数组写法适用于：要绑定多个样式，个数不确定，名字不确定。
2、style样式
：style="{fonSize : xxx}"其中xxx是动态值，键值要用小驼峰命名法。
：style="[a,b]"其中a，b是样式对象。

class样式：

字符串写法：类名不确定，要动态获取

通过v-bind动态绑定样式：

//样式-----------------------------------------


    字符串方法
    
        {{name}} 

        改变样式

数组方法

{{name}}
减少样式增加样式

style方法1

style方法2


    //v-bind简写 ： 将样式style1绑定到div :class="style"-------------------------------------------
    {{name}}

vue动态样式绑定class/style怎么写

也可以添加按钮绑定点击事件改变参数，点击按钮将style的参数变为style2，通过添加判断实现来回改变样式

vue动态样式绑定class/style怎么写

        const vm = new Vue({
            el: '#gjs',
            data:{
                name: '搞技术',
                style: '',
            },
            methods: {
                changeStyle(){
                    if (this.style == 'style2') {
                        this.style = 'style1'
                    } else {
                        this.style = 'style2'
                    }
                    
                }}

对象写法：要绑定多个样式，个数确定，名字确定，但不确定用不用。

vue动态样式绑定class/style怎么写

通过点击按钮或者控制台修改对象属性的值来控制样式的变化

数组写法：要绑定多个样式，个数不确定，名字不确定。

vue动态样式绑定class/style怎么写

通过绑定事件对数组中的值进行修改，点击减少则移除数组中的值，点击添加则给数组中添加值来控制样式的变化

vue动态样式绑定class/style怎么写

所以背景颜色消失

vue动态样式绑定class/style怎么写

style方法（键值要用小驼峰命名法）

    //
    style方法1
        //这里的fontSize小驼峰
        {{name}}
    
    style方法2
    
        {{name}}

vue动态样式绑定class/style怎么写

vue动态样式绑定class/style怎么写

vue动态样式绑定class/style怎么写

简介：

字符串写法：类名不确定，要动态获取

字符串方法

对象方法

数组方法

style方法1

style方法2

对象写法：要绑定多个样式，个数确定，名字确定，但不确定用不用。

数组写法：要绑定多个样式，个数不确定，名字不确定。

style方法 （键值要用小驼峰命名法）

style方法1

style方法2

style方法（键值要用小驼峰命名法）