Vue基础—条件渲染与列表渲染

条件渲染

v-if 用于条件性地渲染一块内容

<h1 v-if="awesome">Hello Vue!</h1>

v-else 表示v-if的else块

必须紧跟在v-if 或者v-else-if的元素后面，否则不会被识别

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if 充当v-if的else-if块，可以连续使用

必须紧跟在v-if 或者v-else-if的元素后面，否则不会被识别

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show 根据条件展示元素的选项

元素总是会被渲染，并且只是简单地基于 CSS 进行切换

<h1 v-show="ok">Hello!</h1>

列表渲染

v-for 基于一个数组来渲染一个列表

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

items ：源数据数组

item ：被迭代的数组元素

数组更新检测方法详见《JavaScript—数组》

v-for与v-if的优先级

v-for和v-if同时使用，有一个先后运行的优先级，v-for比v-if优先级更高，这就说明在v-for每次的循环赋值中每一次调用v-if的判断，所以不推v-if和v-for在同一个标签中同时使用。