vue条件渲染

条件渲染

1.是否展示：v-show = boolean，表达式 ( 结构依旧在 ，被隐藏了)

用法：写在标签体内:<xxx v-show="false"></xxx>

2.是否使用：v-if =false (所有的完全消失)

v-else-if （上头成立，则不进行）

v-else = （上头不成立，则执行此条，不跟条件）

三者必须连在一起使用，且不允许被打断

eg.

① n:0 先出现“老欧” 。

② n:1 老欧 。

③ n:2 小欧 。

④ n:3 中欧 。.....

<h2 @click="n++">点我{{n}}</h2>
​
<h4 v-if="n===2">你好！小欧</h4>
<h4 v-else-if="n===3">你好！中欧</h4>
<h4 v-else>你好！老欧</h4>

3.v-if 与 标签<template></template>（不可以作为根节点）

母版搭配（单独成立）不影响布局样式

eg.

<div>
  <template v-if="n===5">
        <h4>！</h4>
        <h4>!!</h4>
        <h4>!!！</h4>
  </template>
</div>

4.v-show可以获得元素，v-if可能获取不到