Vue 常用指令

• 目录

---

1. 前言

• 在Vue 模板语法 篇中，我介绍了vue的模板语法，但是我觉得还是不够，上一篇中只是按照语法类型进行了简单的介绍，觉得最好还是需要把其他常用的指令方式都记录一下。

2. v-if、v-else-if与v-else

• 这个感觉很奇特，这三个指令可以跨元素联动。主要还是v-if比较常用
• html

<h1>LEVEL:</h1>
<h1 v-if="score>90">A</h1>
<h1 v-else-if="score>60">C</h1>
<h1 v-else>D</h1>

• 注：**v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。同理v-else-if 也要紧跟v-else-if 或v-if **

3. v-show

• v-show的作用同v-if相同，用于展现元素。但是使用v-show 是一定渲染元素的，然后简单的基于 CSS 进行切换。相反v-if如果为false，渲染后dom里面就不会用有对应的元素。
• 注：v-show 不支持 <template> 元素，也不支持 v-else。
• html

<h1 v-show="isShow">Hello Vue</h1>

4. v-for