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

一、v-if

1.1 写法

<p v-if="dice===1">test1</p>
<p v-else-if="dice===2">test2</p>
<p v-else-if="dice===3">test3</p>
<p v-else>约会</p>
data: {
dice: '',
},
methods: {
throwFun() {
this.dice = Math.floor(Math.random() * 4);
console.log(this.dice);
 },
},

1.2特点

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

二、v-show

2.1 写法

<p v-show="dice===1">test</p>

2.2 特点

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

三、v-if VS v-show

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