绑定样式 | iGmaBlog

绑定 class 样式

字符串写法

适用场景：样式名不确定，需要动态指定。

代码实现

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .box
        {
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box1
        {
            background-color: gold;
        }
        .box2
        {
            background-color: salmon;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="box" :class="className" @click="changeStyle"></div>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                className: 'box1'
            },
            methods: {
                changeStyle(){
                    this.className = 'box2'
                }
            }
        })
    </script>
</body>
</html>

数组写法

适用场景：要绑定的样式个数不确定，名字也不确定。

代码实现

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .box
        {
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box1
        {
            background-color: gold;
        }
        .box2
        {
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="box" :class="classArr"></div>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                classArr: ['box1','box2']
            },
        })
    </script>
</body>
</html>

对象写法

适用场景：要绑定的样式个数确定，名字确定，但要动态决定用不用。

代码实现

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .box
        {
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box1
        {
            background-color: gold;
        }
        .box2
        {
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="box" :class="objClass"></div>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                objClass: {
                    box1: true,
                    box2: true
                }
            },
        })
    </script>
</body>
</html>

绑定 style 样式

对象写法

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="box" :style="styleObj"></div>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                styleObj: {
                    fontSize: '40px',
                    backgroundColor: 'gold'
                }
            }
        })
    </script>
</body>
</html>

数组写法（不推荐）

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .box
        {
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="box" :style="styleArr"></div>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                styleArr: [
                    {
                        fontSize: '40px',
                        backgroundColor: 'gold'
                    },
                    {
                        borderRadius: '10px'
                    }
                ]
            }
        })
    </script>
</body>
</html>

绑定 class 样式 ​

字符串写法 ​

数组写法 ​

对象写法 ​

绑定 style 样式 ​

对象写法 ​

数组写法（不推荐） ​

绑定 class 样式

字符串写法

数组写法

对象写法

绑定 style 样式

对象写法

数组写法（不推荐）