Vue2.0绑定样式及条件渲染

一、绑定样式

1.绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 

        <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br/><br/>

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

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

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

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

4.绑定class样式--对象写法

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

5.绑定class样式--数组写法 

        <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>

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

代码展示：

 

 6.总结

（1）class样式

写法：class="xxx" xxx可以时字符串、对象、数组

字符串写法适用于：类名不确定，用动态获取

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定

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

（2）style样式

：style="{fontSize:xxx}"其中xxx是动态值

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

二、条件渲染

1.v-if

写法

（1）v-if="表达式"

（2）v-else-uf="表达式"

（3）v-else="表达式"

适用于：切换频率较低的场景

特点：不展示的DOM元素直接被移除

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”

2.v-show

写法：v-show="表达式"

适用于：切换频率较高的场景

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注

使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到

4.代码展示