Conditional Rendering 条件渲染

F12




1. v-if: try > vm.awesome=0

1.Vue is awesome!


2. v-else

2.Vue is awesome!

2.Oh no 😢


3. 控制多个元素的渲染,template 元素上使用 v-if > vm.ok=0
4. v-else 表示 v-if 之外的情况
每次更新实例,html都会刷新 > vm.type="A"; 想稳定就要放到js中。
注意这里! 大于0.5
注意这里! <=0.5

5. v-else-if > vm.type="B"; vm.type="C"; vm.type="X"
A
B
C
Not A/B/C

6. v-show 和 v-if 差不多 > vm.ok=1; vm.ok=0;

Hello! from v-show

注意: v-show 不支持 template 元素,也不支持 v-else
v-if and v-for不推荐一起用到一个元素,如果用到一个元素,则v-if先执行。