条件渲染

Posted 2021-12-05 ruange

v-if && v-show

• v-if 有三种形式
• 单路分支
• 双路分支
• 多路分支

<div id="app">
<h3> v-if 单路</h3>
<p v-if = "flag"> 单路分支 </p>
<h3> v-if 双路 </h3>
<p v-if = "flag"> 双路1 </p>
<p v-else> 双路2 </p>
<h3> v-if 多路 </h3>
<p v-if = "type === 'A' "> A </p>
<p v-else-if = " type === 'B'"> B </p>
<p v-else> C </p>
</div>

new Vue({
el: '#app',
data: {
msg: 'hello 下午到了',
flag: false,
type: 'A'
}
})

v-show

<div id="app">
<h3> v-show </h3>
<p v-show = "flag"> 千锋教育 </p>
<template v-if = 'flag'>
<div class="box" >
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</template>
</div>

new Vue({
el: '#app',
data: {
msg: 'hello vue.js',
flag: false
}
})

1. v-show 操作的是一个DOM的dispay样式属性
2. 如果v-show的初始值是false,那么这个绑定的DOM元素是否会渲染呢？
   v-show不管值是什么，它都会渲染出来

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

• template--(模板)
  template标签如果放在模板的范围内使用，那么将来不会被解析渲染