Vue动态绑定class

我们在学习js时有学到过如何去动态切换元素的样式，具体有以下步骤：先获得元素修改样式。通过className或者style修改<head><style>.class1 {border: 1px solid black;height: 20px;width: 20px;}</style></head><body><div id...

进阶的菜熊

23811人浏览 · 2022-01-07 08:45:00

进阶的菜熊 · 2022-01-07 08:45:00 发布

我们在学习js时有学到过如何去动态切换元素的样式，具体有以下步骤：

先获得元素

修改样式。通过className或者style修改

<head>
<style>
 .class1 {
         border: 1px solid black;
         height: 20px;
         width: 20px;
        }
</style>
</head>
<body>
<div id='app'></div>
<button onclick="change()">更改样式</button>
</body>
<script>
function change() {
        var app = document.querySelector("#app")
        app.className = 'class1'
        app.style = 'color:red'
        
    }
</script>

用js能达到动态修改样式的效果，但是会有点繁琐不方便，当要动态修改的样式一多就会使代码变得特别冗长，不利于维护。说到这就要请出今天的主角vue大兄弟出来了，没错今天呢就要讲讲vue如何动态绑定class与style。

class动态绑定

为了证明这一方法好用就先改改上面的代码。

<head>
<style>
 .class1 {
         border: 1px solid black;
         height: 20px;
         width: 20px;
        }
</style>
</head>
<body>
 <div id="app">
        <div :class="class1"></div>
        <button @click="change">更改样式</button>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            class1: ''
        },
        methods: {
            change() {
                this.class1 = 'class1'
            }
        },
    })
</script>

vue中通过v-bind(:)动态绑定data属性class1,当点击按钮时便触发change方法将class1的值变换从而改变div的样式。从上面看来比原生js动态改变元素样式的方法方便的多。动态样式的实现其实也能理解成将class看成一个变量，通过改变class的值去动态切换样式。

对class动态绑定有了大概了解后，接下来再深入了解。

添加class

<div class="class1" :class="class2" ></div>

上面代码中有两个class不同的是后一个class增加了v-bind(:),猜想会有人认为class2会将class1的样式进行覆盖，但是因为增加了v-bind而使本应该覆盖的情况转换成了添加，也就是说后面div的样式会呈现出下面这样的效果

<div class="class1 class2" ></div>

添加class数组

如果需要为一个元素添加多个样式可以使用此种方法

<div :class="classNames"> hi,everyone!!</div>
data: {
       classNames: ['class1', 'class2', 'class3']
        }

使用数组的方法可以很快速的添加或者删除样式。

也可以使用以下这种方法，但是这种方法弊端多，不建议使用只做了解

<div :class="[class1,class2,class3]"> hi,everyone!!</div>

添加class对象

这种方法用于已确定使用的样式，但是现在某种样式不显示或显示

语法

对象名:{
    样式1:true|false,
    样式2:true|false
}

具体实现

要求样式1显示而样式2不显示

<div :class="objClass"> hi,everyone!!</div>
data:{
    objClass:{
        class1:true,
        class2:flase
    }
}

也可以使用以下这种方法，但是这种方法弊端多，不建议使用只做了解

<div :class="{class1:true,class2:flase}"> hi,everyone!!</div>

案例：实现多种样式间的随机切换

<style>
        .class1 {
            color: black;
        }
        .class2 {
            color: blue;
        }
        .class3 {
            color: green;
        }
    </style>
</head>

<body>
    <div id="app">
        <div :class="className"> hi,everyone!!</div>
        <button @click="change">更改样式</button>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            className: ''
        },
        methods: {
            change() {
                let arr = ['class1', 'class2', 'class3']
                let index = Math.floor(Math.random() * 3)
                this.className = arr[index]
                console.log(index)
            }
        },
        computed: {}
    })

</script>

style动态绑定

css中为一个元素添加内联样式一般用

<div style="font-size:40px"></div>

现在我们有需求希望将font-size的值改为动态绑定，因此我们可以使用vue中的style动态绑定，先来改动上面的代码。

<div id="app" :style="{fontSize:fsize+'px'}"
new Vue({
    el:'#app',
    data:{
        fsize:30
    }
})

可以看到在vue中将font-size改成了fontSize这是因为vue中命名规则需将以横线命名改为驼峰命名，另外，style中有多个属性所以要以对象的形式包装多个属性，以上style样式也可以写成这样

data:{
    style:{
    fontSize:'30px',
    color:'blue'
    }
}

style对象写法

对象中的属性必须是css包含有的属性,只需更改成vue认可的命名规则即可，如：fontSize(font-size)、backgroundColor(background-color)

<body>
    <div id="app" :style="style">
        head,yes
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                style: {
                    backgroundColor: 'green',
                    color: 'red',
                    width: '40px',
                    height: '100px'
                }
            }
        })
    </script>
</body>

style数组的写法

<body>
    <div id="app" >
        <div :style="[style,style1,style2]">head,yes<div>//数组格式方法一
        <div :style="styleArr">head</div>//数组格式方法二
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                style: {
                    backgroundColor: 'green',  
                    height: '100px'
                },
                style1:{
                    color: 'red'
                    },
                style2:{
                     width: '40px'
                    },
                styleArr:[{
                        color: 'red'
                    },
                    {
                     width: '40px'
                    }]     
                }
        })
    </script>
</body>