0
点赞
收藏
分享

微信扫一扫

Vue:绑定样式

大师的学徒 2022-03-23 阅读 81

文章目录

Vue:绑定样式

一、绑定class样式

1、字符串写法

    <div id="root">
        <div class="base" :class="mood" @click="changeMood">{{name}}</div>
    </div>
    new Vue({
        el:'#root',
        data:{
            name:'Hello World',
            mood:"happy"
        },
        methods: {
            changeMood(){
                const arr = ['happy', 'bad', 'norlly'];
                //三种样式随机一种
                const index = Math.floor(Math.random()*3);
                this.mood = arr[index]
            }
        },
        
    })

2、数组写法

<div class="base" :class="arr" @click="changeMood">{{name}}</div>
 new Vue({
        el:'#root',
        data:{
            name:'Hello World',
            mood:"happy",
            arr:['happy', 'bad', 'norlly']
        },
        methods: {
            changeMood(){
                const arr = ['happy', 'bad', 'norlly'];
                //三种样式随机一种
                const index = Math.floor(Math.random()*3);
                this.mood = arr[index]
            }
        },
    })

3、对象写法

 <div class="base" :class="classObj" @click="changeMood">{{name}}</div>
    new Vue({
        el:'#root',
        data:{
            name:'Hello World',
            mood:"happy",
            arr:['happy', 'bad', 'norlly'],
            classObj:{
                happy:false,
                bad:false,
                norlly:true
            }
        },
        methods: {
            changeMood(){
                const arr = ['happy', 'bad', 'norlly'];
                //三种样式随机一种
                const index = Math.floor(Math.random()*3);
                this.mood = arr[index]
            }
        },
        
    })

二、绑定style样式


1、对象写法

<div class="base"  :style="styleObj">{{name}}</div>
    new Vue({
        el:'#root',
        data:{
            name:'Hello World',
            styleObj:{
                fontSize: '40px'
            }
        }   
    })

2、数组写法

        <div class="base"  :style="styleArr">{{name}}</div>
    new Vue({
        el:'#root',
        data:{
            name:'Hello World',
            styleArr:[
                {
                    fontSize:'40px',
                    color:'blue'
                },
                {
                    backgroundColor:'green'
                }
            ]
        }   
    })

三、总结

举报

相关推荐

Vue 绑定样式

vue样式绑定

Vue样式绑定---kalrry

10 Vue绑定样式

vue 动态样式绑定

vue绑定class样式

0 条评论