VUE：class与style强制绑定

最新推荐文章于 2025-08-06 16:42:26 发布

weixin_30340819

最新推荐文章于 2025-08-06 16:42:26 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/it-taosir/p/9886995.html

本文详细介绍了在Vue.js中如何使用class和style绑定来实现元素样式的动态变化，包括字符串、对象和数组绑定方式，并通过实例展示了动态更新样式的具体操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .aClass{
                color:red;
            }
            .bClass{
                color:blue;
            }
            .cClass{
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <!--
            1.理解
                在应用界面中，某个（些）元素的样式是变化的
                class/style绑定就是专门用来实现动态样式效果的技术
            2.class绑定：class='xxx'
                xxx是字符串
                xxx是对象
                xxx是数组
            3.style绑定
                :style="{color: activeColor,fontSize: fontSize+'px'}"
                其中activiColor/fontSize是data属性
        -->
        
        <div id="app">
            <h2>1.class绑定：：class='xxx'</h2>
            <p class="cClass" :class="a">xxx是字符串</p>
            <p :class="{aClass:isA,bClass:isB}">xxx是对象</p>
            <p :class="['aClass','cClass']">xxx是数组</p>
            <h2>2.style绑定</h2>
            <p :style="{color: activeColor,fontSize: fontSize+'px'}">:style="{color: activeColor,fontSize: fontSize+'px'}"</p>
            <button @click="update">更新</button>
        </div>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            new Vue({
                el:"#app",
                data:{
                    a:'aClass',
                    isA:true,
                    isB:false,
                    activeColor:'red',
                    fontSize:20
                },
                methods:{
                    update(){
                        this.a='bClass',
                        this.isA=false,
                        this.isB=true,
                        this.activeColor='green';
                        this.fontSize=30
                    }
                }
            })
        </script>
    </body>
</html>