1.绑定class样式:

<div id="root">
<!--    绑定class样式--字符串写法，适用于：样式的类名不确定，要动态确定--><div class="basic" :class="mood" @click="change()">{{name}}</div><hr>
<!--    以数组写法绑定--><div class="basic" :class="arr" @click="change()">{{name}}</div>
<!--    对象形式绑定--><div class="basic" :class="obj">{{name}}</div>
</div><script>new Vue({el:'#root',data:{name:"ykw",mood:'happy',arr:['file','file2','file3'],obj:{worry:true,happy:true}},methods:{change(){const arr=['happy','normal','worry']const index=Math.floor(Math.random()*3)this.mood=arr[index]}}})
</script>

2.绑定style样式

<div id="root">
<!--    绑定class样式--字符串写法，适用于：样式的类名不确定，要动态确定--><div class="basic" :class="mood" @click="change()">{{name}}</div><hr>
<!--    以数组写法绑定--><div class="basic" :class="arr" @click="change()">{{name}}</div>
<!--    对象形式绑定--><div class="basic" :class="obj">{{name}}</div>
<!--    绑定style样式 对象写法--><br><div class="basic" :style="styleobj" >{{name}}</div><!--    绑定style样式 数组写法--><div class="basic" :style="[styleobj,styleobj2]" >{{name}}</div>
</div><script>new Vue({el:'#root',data:{name:"ykw",mood:'happy',arr:['file','file2','file3'],obj:{worry:true,happy:true},styleobj:{fontSize: '40px',color:'red',backgroundColor:'blue'},styleobj2:{backgroundColor:'blue'},},methods:{change(){const arr=['happy','normal','worry']const index=Math.floor(Math.random()*3)this.mood=arr[index]}}})
</script>

总结：

 二：条件渲染

        v-if: 布尔类型      v-else-if：   v-else:            v-show:  布尔类型

<div id="root">
<!--    false：隐藏 true:显示--><h1 v-show="a">欢迎{{name}}</h1>
<!--    还可以写表达式，--><h1 v-show="1===1">欢迎{{name}}</h1><!--    v-if判断,为false就不会看见--><h1 v-if="false">欢迎{{name}}</h1><h1 v-if="1===1">欢迎{{name}}</h1>
</div>
<script>const vm = new Vue({el:'#root',data:{name:'ykw',a:false}})</script>

2.2 template不会破坏结构，只能配合v-if，不能配合v-show -->

<!--   template不会破坏结构，只能配合v-if，不能配合v-show --><template v-if="true"><h1>hello</h1><h1>ykw</h1><h1>2022</h1></template>