Vue绑定样式，条件渲染，列表渲染

绑定样式

绑定class样式

• 字符串写法
  • 适用于：样式的类名不确定，需要动态指定

<div id="root">
        <div  class="test" :class="mood" @click="changeM">test</div>
        
</div>

<script>
    let vm=new  Vue({
        el:"#root",
        data:{
            mood:'normal' 
        },
        methods: {
            changeM(){
                const arr=['sad','normal','happy']
                const index=Math.floor(Math.random()*3)
                //Math.radom 生成大于0且小于1的double型随机数
                //Math.radom()*3生成0.???  1.???  2.???
                //Math.floor() 向下取整0,1,2
                this.mood=arr[index]
                }
        },
    })
</script>

• 数组写法
  • 适用于：要绑定的样式个数不确定，名字也不确定

<div :class='arr'></div>

data:{
arr:['a1','a2','a3']
}

• 对象写法
  • 适用于：要绑定的样式个数确定，名字也确定，但要动态决定用不用

<div :class='classObj'></div>
data:{
    classObj:{
        a1:false,
        a2:true
    }
}

绑定style样式

• 对象写法

<div style="styleObj"></div>
data:{
    styleObj:{
        fontSize:'40px',
		color:'red'
    }
}

• 数组写法

<div style="styleObj"></div>
data:{
    styleObj1:{
        fontSize:'40px',
		color:'red'
    },
    styleObj2:{
         bac