vue学习（五）【vue样式绑定：对象或数组】

最新推荐文章于 2025-06-10 18:10:24 发布

原创最新推荐文章于 2025-06-10 18:10:24 发布 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了Vue中四种样式的绑定方法：class的对象绑定、class数组绑定、style对象和style数组。通过这些方法，可以在Vue应用中动态地改变元素样式，实现动态效果。例如，点击操作可以改变文本颜色，对应的DOM元素会根据绑定的样式更新其表现。

点击改变文字颜色

通过class对象绑定和class数组绑定，可以实现vue的样式绑定。在页面中检查dom元素，看点击测试文本时，dom中是否会出现class名，然后在style中定义的一些样式就可以动态的作用到dom上了。

第一种：class的对象绑定

<!--数据双向绑定的实例-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式绑定</title>
    <script src="./vue.js"></script>
    <style>
        .activated {
            color: red;
        }
    </style>
</head>
<body>
<div id="root">
    <!--class对象，注意以下的写法-->
    <div @click="handleDivClick"
         :class="{activated: isActivited}"
    >
        Hello World
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#root",
        data: {
            isActivited: false/*默认置false*/
        },
        methods: {
            handleDivClick: function () {
                this.isActivited = !this.isActivited;/*每次点击让该变量取反*/
            }
        }
    })
</script>

</body>
</html>

第二种方法：通过定义class数组，可以定义多个style。都可以起作用

<!--数据双向绑定的实例-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式绑定</title>
    <script src="./vue.js"></script>
    <style>
        .activated {
            color: red;
        }

        .activated_one {
            font-size: 100px;
        }
    </style>
</head>
<body>
<div id="root">
    <!--绑定一个class数组，所以数组中可以有多个属性名，当某一个属性值不为空时，那个起作用-->
    <div @click="handleDivClick"
         :class="[activated,activated_one]"
    >
        Hello World
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#root",
        data: {
            activated: "activated",
            activated_one: "activated_one"
        },
        methods: {
            handleDivClick: function () {
                /*activated刚好是style中定义的activated*/
                this.activated = this.activated === "activated" ? "" : "activated";
            }
        }
    })
</script>

</body>
</html>

第三种：style对象

样式内联的方法，在标签中直接写style="XXX"，可以定义一个style对象，也可以直接{css表达式}

<!--数据双向绑定的实例-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式绑定</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <!--绑定一个class数组，所以数组中可以有多个属性名，当某一个属性值不为空时，那个起作用-->
    <div :style="styleObj"
         @click="handleDivClick">
        Hello World
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#root",
        data: {
            styleObj: {
                color: "black"
            }
        },
        methods: {
            handleDivClick: function () {
                this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
            }
        }
    })
</script>

</body>
</html>

第四种，style数组

<div :style="[styleObj,{fontSize:'100px'}]"
         @click="handleDivClick">
        Hello World
</div>

可以挂载多个对象