vue2条件渲染v-if VS v-show

一、v-if

1.1 写法

<p v-if="dice===1">test1p>
<p v-else-if="dice===2">test2p>
<p v-else-if="dice===3">test3p>
<p v-else>约会p>
data: {
dice: '',
},
methods: {
throwFun() {
this.dice = Math.floor(Math.random() * 4);
console.log(this.dice);
 },
},
1
2
3
4
5
6
7
8
9
10
11
12
13

1.2特点

• 语法和原⽣js的 if...else if...else ⼀样
• 不展示时直接移除DOM元素，适合切换频率低的场景
• v-if 、 v-else-if 、 v-else 要连⽤

二、v-show

2.1 写法

<p v-show="dice===1">testp>
1

2.2 特点

不展示时使⽤样式隐藏，适合切换频率⾼的场景。

三、v-if VS v-show

• ⼀般来说， v-if 有更⾼的切换开销，⽽ v-show 有更⾼的初始渲染开销。
• 如果需要⾮常频繁地切换，则使⽤ v-show 较好；如果在运⾏时条件很少改变，则使⽤ v-if 较好。