Vue学习笔记-样式绑定

最新推荐文章于 2024-07-19 18:41:59 发布

printf_________

最新推荐文章于 2024-07-19 18:41:59 发布

阅读量47

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/printf_________/article/details/128807238

版权

<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>