vue四：vue基礎之Class和style繫結

阿新 • • 發佈：2021-01-20

一：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>