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

一、绑定样式

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

   ?

   1 2 3 4 5 6 7 8

   <!-- 绑定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是动态值。

   ?

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

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

   ?

   1	<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一起使用，但要求结构不能被“打断”。

   ?

   1 2 3 4

   <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元素未被移除，仅仅是使用样式隐藏掉。

   ?

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

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