【Vue】基础系列（五）绑定样式-条件渲染

一、绑定样式

1. class样式
   写法:class="xxx" xxx可以是字符串、对象、数组。

   <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
   <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
   
   <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
   <div class="basic" :class="classArr">{{name}}</div> <br/><br/>
   
   <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
   <div class="basic" :class="classObj">{{name}}</div> <br/><br/>
   

2. style样式(不常用)
   :style="{fontSize: xxx}"其中xxx是动态值。

   <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>

   :style="[a,b]"其中a、b是样式对象。

   <div class="basic" :style="styleArr">{{name}}</div>
   

二、条件渲染

1. v-if
   写法：(1).v-if="表达式".(2).v-else-if="表达式"。(3).v-else="表达式"
   适用于：切换频率较低的场景。
   特点：不展示的DOM元素直接被移除。
   注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

   <div v-if="n === 1">Angular</div>
   <div v-else-if="n === 2">React</div>
   <div v-else-if="n === 3">Vue</div>
   <div v-else>哈哈</div> 

2. v-show
   写法：v-show="表达式"
   适用于：切换频率较高的场景。
   特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。

   <h2 v-show="false">欢迎来到{{name}}</h2> 
   <h2 v-show="1 === 1">欢迎来到{{name}}</h2> 

3. 备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。