vue四：vue基础之Class和style绑定

一：class绑定

准备好class

一：三目运算的方式

把class动态绑定，定义一个变量isActive为true，为true时绑定class=red，定义点击事件handlClick，当点击时，isActive取反，即为false，绑定class=yellow

二：对象的形式

上面是对只有两个class选项切换的情况，当有多个class切换的时候，可以使用对象的形式

如果要改变class，则只需要对classObj对象做操作就行了

但是此时如果增加class，则不会成功

原因是后面加入的属性并没有被get、set拦截

三：数组的方式

接下来只需要对数组做操作就可以改变class了

删除

增加

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <script src='./vue.js'></script>
    <title></title>
    <style>
        .red {
            background-color: red;
        }

        .yellow {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="background: yellow">111</div>
    <button @click="handleClick()">点击动态绑定class</button>
    <!--    <div :class="isActive?'red':'yellow'">动态绑定class的三目写法</div>-->
    <!--    <div :class="classObj">动态绑定class的对象写法</div>-->
    <div :class="classArr">动态绑定class的数组写法</div>

</div>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data: {
            isActive: true,
            classObj: {
                'a': true,
                'b': true
            },
            classArr: ['a', 'b']
        },
        methods: {
            handleClick() {
                this.isActive = !this.isActive
            }
        }
    });
</script>
</body>
</html>

二、绑定style

1.三目运算符的形式

二：对象写法

修改

如果是带-的属性，则改为驼峰命名法：

此写法与上面绑定class的方法一样，有个缺点，新增的时候不会被get、set拦截

三：数组的写法

需以对象的形式添加style

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <script src='./vue.js'></script>
    <title></title>
    <style>
        .red {
            background-color: red;
        }

        .yellow {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="app">
    <!--    <button @click="handleClick()">点击动态绑定class</button>-->
    <!--    <div :class="isActive?'red':'yellow'">动态绑定class的三目写法</div>-->
    <!--    <div :class="classObj">动态绑定class的对象写法</div>-->
    <!--    <div :class="classArr">动态绑定class的数组写法</div>-->

    <button @click="handleClick()">点击动态绑定style</button>
    <!--    <div :style="'background: '+(isActive?'yellow':'red')">动态绑定style的三目写法</div>-->
    <!--    <div :style="styleObj">动态绑定style的对象写法</div>-->
    <div :style="styleArr">动态绑定style的对象写法</div>
</div>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data: {
            isActive: true,
            styleArr: [],
            styleObj: {
                // font-family:'宋体';">此写法会报错
                backgroundColor: 'red'
            },
            classObj: {
                'a': true,
                'b': true
            },
            classArr: ['a', 'b']
        },
        methods: {
            handleClick() {
                this.isActive = !this.isActive
            }
        }
    });
</script>
</body>
</html>

讨论群：249728408