10_Vue中class与style样式绑定

最新推荐文章于 2025-06-11 20:06:40 发布

原创最新推荐文章于 2025-06-11 20:06:40 发布 · 324 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

Vue2笔记专栏收录该内容

31 篇文章

订阅专栏

文章详细介绍了Vue.js中如何使用class和style绑定来实现动态样式效果。class绑定支持字符串、对象和数组三种写法，分别适用于不同场景：字符串适用于类名不确定，对象适用于样式个数不确定且名字不确定，数组适用于样式个数确定但名字不确定。style绑定则可以通过对象或数组设置动态的内联样式。

概述

在应用界面中，某个（些）元素的样式是变化的；

class/style绑定就是专门用来实现永泰样式效果的技术。

class 绑定

1.class样式写法:class="xxx”xxx可以是字符串、对象、数组。

字符串写法适用于:类名不确定，要动态获取。

对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。

数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。

1 :class='xxx'

2 表达式是字符串：'classA'

3 表达式是对象：{classA:isA,classB:isB}

4 表达式是数组：[classA,classB]

具体内容如下

1.绑定class样式-字符串写法

适用于：样式的类名不确定，需要动态指定

<head>
    <script src="../js/vue.js"></script>
    <style>
        .basic {
            width: 300px;
            height: 100px;
            border: 1px solid black;
        }
        .normal {
            background-color: #9bff7f;
        }
        .happy {
            background-color: #ff0055;
        }
        .sad {
            background: #373133
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 绑定class样式-字符串写法  适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                name: '朱雀',
                mood: 'normal'
            },
            methods: {
                changeMood() {
                    const arr = ['happy', 'sad', 'normal']
                        //Math.random()的随机值是[0,1)
                    const index = Math.floor(Math.random() * 3)
                    this.mood = arr[index]
                }
            }
        })
    </script>
</body>

2.绑定class样式-数组写法

适用于：要绑定的样式个数不确定、名字也不确定

<head>
    <script src="../js/vue.js"></script>
    <style>
        .basic {
            width: 300px;
            height: 100px;
            border: 1px solid black;
        }
        .normal {
            background-color: #9bff7f;
        }
        .happy {
            background-color: #ff0055;
        }
        .sad {
            background: #373133
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 绑定class样式-数组写法  适用于：要绑定的样式个数不确定、名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                name: '朱雀',
                mood: 'normal',
                classArr: ['happy', 'sad', 'normal']
            }
        })
    </script>
</body>

可以移除，也可以添加

3.绑定class样式-对象写法

适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用

<!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>
    <style>
        .basic {
            width: 300px;
            height: 100px;
            border: 1px solid black;
        }
        
        .normal {
            background-color: #9bff7f;
        }
        
        .happy {
            background-color: #ff0055;
        }
        
        .sad {
            background: #373133
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 绑定class样式-字符串写法  适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
        <!-- 绑定class样式-数组写法  适用于：要绑定的样式个数不确定、名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div>
        <!-- 绑定class样式-对象写法  适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用-->
        <div class="basic" :class="classObj">{{name}}</div>

    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                name: '朱雀',
                mood: 'normal',
                classArr: ['happy', 'sad', 'normal'],
                //样式个数确定，名字确定
                classObj: {
                    happy: false,
                    sad: false
                }
            },
            methods: {
                changeMood() {
                    const arr = ['happy', 'sad', 'normal']
                        //Math.random()的随机值是[0,1)
                    const index = Math.floor(Math.random() * 3)
                    this.mood = arr[index]
                }
            }
        })
    </script>
</body>

</html>

style样式

:style="{fontsize: xxx}"其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象。

<body>
        <div class="basic" :style="styleObj">{{name}}</div>
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                name: '朱雀',
                mood: 'normal',
                classArr: ['happy', 'sad', 'normal'],
                //样式个数确定，名字确定
                classObj: {
                    happy: false,
                    sad: false
                },
                styleObj: {
                    fontSize: '40px',
                    backgroundColor: 'orange'
                },
                styleArr: [{
                    fontSize: '40px'
                }, {
                    backgroundColor: 'orange'
                }]
            }}
        })
    </script>
</body>