文章目录

• Vue：绑定样式
• 一、绑定class样式
• • 1、字符串写法
  • 2、数组写法
  • 3、对象写法
• 二、绑定style样式
• • 1、对象写法
  • 2、数组写法
• 三、总结

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'
                }
            ]
        }   
    })

三、总结