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
}
})
- v-show 操作的是一个DOM的dispay样式属性
- 如果v-show的初始值是false,那么这个绑定的DOM元素是否会渲染呢？
v-show不管值是什么，它都会渲染出来
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
- template--(模板)
template标签如果放在模板的范围内使用，那么将来不会被解析渲染