开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情
13. v-if 和 v-show 的区别
实现原理不同:
- v-if指令会动态的创建或者移除DOM元素, 从而控制元素在页面上的显示与隐藏;
- v-show指令会动态为元素添加或移除style="display:none;"样式,从而控制元素的显示与隐藏;
性能消耗不同: v-if 有更高的切换开销,而v-show有更高的初始渲染开销。因此：
- 如果需要非常频繁地切换,则使用 v-show 较好
- 如果需要运行时条件很少改变,则使用 v-if 较好
13-1. 条件渲染指令
条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指令由如下两个：分别是
- v-if
- v-show 示例用法如下：
<div id="app">
<p v-if="networkState === 200">请求成功 --- 被 v-if 控制</p>
<p v-show="networkState === 200">请求成功 --- 被 v-show 控制</p>
</div>
13-2. v-else
V-if 可以单独使用,或配合 v-else 指令一起使用：
<div v-if="Math.random() > 0.5">
随机数大于0.5
</div>
<div v-else>
随机数小于或等于 0.5
</div>
- 注意：v-else 指令必须配合 v-if 指令一起使用,否则它将不会被识别！
13-3. v-else-if
v-else-if 指令,顾名思义,充当 v-if 的 "else-if块",可以连续使用：
<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>
- 注意：v-else-if 指令必须配合 v-if 指令一起使用,否则它将不会被识别！
13-4. 列表渲染指令
VUE 提供了v-for列表渲染指令,用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for指令需要使用item in items 形式的特殊语法,其中:
- items 是 待循环的数组
- item 是 被循环的每一项
data:{
list:[
// 列表数据
{id:1,name:'张三'},
{id:2,name:'李四'}
]
}
<ul>
<li v-for="item in list">姓名是：{{item.name}}</li>
</ul>
13-5. v-for 中的索引
v-for 指令还支持一个 可选的第二个参
