vue动态样式绑定class/style的写法小结

vue 动态样式绑定 class和style vue 动态样式绑定 vue 动态绑定class 2023-03-06 08:03:14 577人浏览独家记忆

摘要

目录简介：字符串写法：类名不确定，要动态获取对象写法：要绑定多个样式，个数确定，名字确定，但不确定用不用。数组写法：要绑定多个样式，个数不确定，名字不确定。 s

简介：

绑定样式：

1、class样式

写法：class="xxx" xxx可以是字符串，对象，数组。

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

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

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

2、style样式

：style="{fonSize : xxx}"其中xxx是动态值，键值要用小驼峰命名法。

：style="[a,b]"其中a，b是样式对象。

class样式：

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

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

//样式-----------------------------------------
    <style>
        .basic{
            border: 5px solid rgb(77, 191, 252);   //边框
            width: 400px;   //宽
            height: 100px;  //高
        }
        .style1{
            border: 5px solid rgb(75, 139, 235);  //边框
            background-color: rgb(20, 117, 122);  //背景颜色
            color: bisque;    //字体颜色 
            
        }
        .style2{
            border: 5px solid rgb(182, 219, 131);  //边框
            background-color: rgb(222, 171, 203);  //背景
            color: rgb(16, 23, 29);   //字体
            border-radius: 10px;   //圆角
        }
        .change1{
            background: -WEBkit-linear-gradient(left,rgb(182, 219, 131),rgb(241, 137, 201));   //渐变背景
            
        }
        .change2{
            font-size: larger;    //大号字体
            border-radius: 30px;  //圆角
 
        }
    </style>

<div id="gjs">
    <h1>字符串方法</h1>
    <div class="basic" :class="style">
        {{name}} <br>
        <button @click="changeStyle">改变样式</button>
    </div>
    <hr>    
    <h1>对象方法</h1>
    <div class="basic" :class="styleObj">
        {{name}}
        <br>
        <button @click="changeStyle1">改变样式</button>
    </div>
    <hr>
    <h1>数组方法</h1>
    <div class="basic" :class="styleArr">
        {{name}}
        <br>
        <button @click="changeStyle2">减少样式</button>
        <button @click="changeStyle3">增加样式</button>
    </div>
    <h1>style方法1</h1>
    <div class="basic" :style="{fontSize : fsize+'px'}">
        {{name}}
    </div>
    <h1>style方法2</h1>
    <div class="basic" :style="fontSize">
        {{name}}
    </div>
</div>

<body>
    //v-bind简写 ： 将样式style1绑定到div :class="style"-------------------------------------------
    <div id="gjs" class="basic" :class="style">{{name}}</div>
    <script>
        const vm = new Vue({
            el: '#gjs',
            data:{
                name: '搞技术',
                //定义类名-可以通过绑定事件更改为其他类名更改样式-----------------------------------
                style: 'style1',
            },
        })
    </script>
</body>

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

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

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

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

    <script>
        const vm = new Vue({
            el: '#gjs',
            data:{
                name: '搞技术',
                styleObj:{  
                    change1:false,
                    change2:false,
                }
            },
            methods: {
                changeStyle1(){
                    if (this.styleObj.change1 == true) {
                        this.styleObj.change1 = false
                        this.styleObj.change2 = false
                    } else {
                        this.styleObj.change1 = true
                        this.styleObj.change2 = true
                    }
                }
    })
    </script>

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

    <script>
        const vm = new Vue({
            el: '#gjs',
            data:{
                name: '搞技术',
                styleArr:['change1','change2'],
            },
            methods: {
                changeStyle2(){
                    this.styleArr.shift()
                },
                changeStyle3(){
                    this.styleArr.unshift('change1')
                }
            }
    })
    </script>

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

所以背景颜色消失

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

    //
    <h1>style方法1</h1>
    <div class="basic" :style="{fontSize : fsize+'px'}">    //这里的fontSize小驼峰
        {{name}}
    </div>
    <h1>style方法2</h1>
    <div class="basic" :style="fontSize">
        {{name}}
    </div>

    <script>
        const vm = new Vue({
            el: '#gjs',
            data:{
                name: '搞技术',
                fsize:40,   //方法1
                fontSize:{
                    fontSize:'40px',
                },  //方法2这里的fontSize小驼峰
            }
    })
    </script>