【Vue2.0学习】—class与style绑定（三十八）-CFANZ编程社区

【Vue2.0学习】—class与style绑定（三十八）

一、理解

在应用界面中，某个元素的样式时变化的
class/style 绑定就是专门用来实现动态样式效果的技术

二、class 绑定

:class='xxx'
表达式是字符串:'classA'
表达式是对象:{classA:isA, classB: isB}
表达式是数组:['classA', 'classB']

【Vue2.0学习】—class与style绑定（三十八）_数组

三、style 绑定

:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中activeColor/fontSize 是data 属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <style>
        .basic {
            width: 500px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
        }
        
        .normal {
            width: 500px;
            height: 100px;
            border: 1px solid #000;
            background-color: rgb(239, 165, 165);
        }
        
        .happy {
            width: 500px;
            height: 100px;
            border: 1px solid #000;
            background-color: orange;
        }
        
        .sad {
            width: 500px;
            height: 100px;
            border: 1px solid #000;
            background-color: purple;
        }
        
        .box1 {
            width: 500px;
            height: 200px;
            border-radius: 50%;
            background-color: pink;
        }
        
        .box2 {
            width: 500px;
            height: 200px;
            border-radius: 50%;
            background-color: rgb(230, 114, 133);
        }
        
        .box3 {
            width: 500px;
            height: 200px;
            border-radius: 50%;
            background-color: yellow;
        }
    </style>
    <div id="root">
        <!-- 绑定class样式 字符串写法 适用于样式的类名不确定 需要动态指定-->
        <div class="basic" :class="mood" @click="change">
            {{name}}
        </div>
        <hr>
        <!-- 绑定class样式数组写法 适用于：要绑定的样式个数不确定 名字也不确定 -->
        <div class="basic" :class="classarr">
            {{name}}
        </div>

        <div class="basic" :class="qwe">
            {{name}}
        </div>
        <br>
        <!-- 绑定style样式 ：对象写法-->
        <div class="basic" :style="styleObject">{{name}}
        </div>
        <br>
        <br>
        <!-- 绑定style样式数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '小王童鞋',
                mood: 'normal',
                classarr: ['box1', 'box2', 'box3'],
                qwe: {
                    box1: false,
                    box2: true
                },
                styleObject: {
                    fontSize: '50px',
                    color: 'purple',
                    backgroundColor: 'skyblue'
                },
                styleArr: [{
                        backgroundColor: 'blue'
                    }, {
                        fontSize: '60px'
                    }

                ]
            },
            methods: {
                change() {
                    const arr = ['happy', 'sad', 'normal']
                    const index = Math.floor(Math.random() * 3)
                    this.mood = arr[index]
                }
            }
        })
    </script>
</body>

</html>