Vue学习笔记-样式绑定

最新推荐文章于 2025-12-22 19:02:04 发布

原创最新推荐文章于 2025-12-22 19:02:04 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #javascript

本文介绍了一个使用 Vue.js 实现的示例，展示了如何动态地为元素设置类名和内联样式，同时演示了如何绑定事件处理器来改变元素的状态。通过三个不同的 div 容器，分别使用对象、数组及计算属性来动态绑定类名，并利用按钮触发事件更新元素背景颜色。

<div id="box1" class="basic" :class="classObj" :style="styleObj">{{name}}</div>
<div id="box2" class="basic" :class="arr">{{name}}</div>
<div id="box3" class="basic" :class="color">{{name}}
    <button @click="fun">点我改变背景颜色</button>
</div>
<script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el:'#box1',
            data:{
                name:'hellow world!',
                classObj:{
                    color2:false,
                    r:true,
                    
                },
                styleObj:{
                    fontSize:'40px'
                }
            }
        })
        const vm = new Vue({
            data:{
                name:'hellow world!',
                arr:['color1','r']
            }
        })
        vm.$mount('#box2')
        new Vue({
            el:'#box3',
            data:{
                name:'hellow world!',
                count:1,
                a:['color1','color2','color3'],
                color:'color1'
            },
            methods: {
                fun(){
                    this.count=(this.count+1)%3
                    this.color=this.a[this.count]
                }
            },
        })
    </script>