vue中的动态绑定样式 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
    .a{
        width: 100px;
        height: 100px;
    }
    .b{
        background-color: red;
    }
</style>
<body>

<!--
    上面定义了两个css样式，第一个定义了宽高，在容器里面固定使用了a样式，b样式则通过点击事件，绑定在了mood上，当点击事件执行时，修改mood，就会动态将b样式添加进去
    这种方式只适用于样式的类名不确定，需要动态指定，或者动态增加样式的情况，称之为字符串写法

    另外还可以绑定数组的写法，先把所有的类（css）定义好，然后扔进data中定义好的一个数组中，通过代码维护数组中的元素即可动态添加、减少样式
    数组写法适用于要绑定的样式、个数、名称都不确定

    第三种写法就是对象写法，通过定义一个对象，对象里面的属性对应一个类（css），属性的值是布尔类型，如果为true则表示使用这个样式，反之不使用
-->
<div id = "app">
    <button class="a" :class="mood" @click="mood = 'b'">aaa</button>
    <button :class="moodObj" >aaa</button>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data :{
            mood: ['a','b'],//数组也可以，操作数据即可增加、减少样式
            moodObj: {
                a: true,
                b: false
            }//对象写法,通过改变a、b的布尔值决定该样式是否使用
        }
    })
</script>
</body>
</html>

 

posted @ 2021-12-09 19:41  名难  阅读(491)  评论(0)    收藏  举报