【Vue】v-if 、v-show、v-for指令，最基础的流程控制和循环处理

本文我们来学习一下v-if，v-show和v-for指令，也就是最基础的流程控制和循环处理。

v-if 和 v-show

v-if 和 v-show 的作用有点类似，都是进行条件判断，我们一起来看一下，案例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app"><h2 v-if='flag'>v-if的使用</h2><h2 v-show='flag'>v-show的使用</h2></div><script>var vm = new Vue({el:"#app",data:{flag:true},methods:{}})</script>
</body>
</html>

通过演示效果我们能看到 v-if 和 v-show 都能控制标签元素的显示和隐藏，但相互之间又有区别：

v-if 每次都会重新删除或创建元素，而 v-show 只是切换了元素的 display:none 样式。
v-if 的 切换性能 消耗较高，而 v-show 的 初始渲染 消耗较高。
如果元素涉及到频繁的切换，推荐使用 v-show；如果元素可能永远不会显示出来被用户看到，则推荐使用 v-if。

v-for的使用

1、迭代数组

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app"><div v-for='(item,index) in list'>第{{index}}项：{{item}}</div></div><script>var vm = new Vue({el: '#app',data: {list: [1, 2, 3, 4, 5, 6]},methods: {}});</script>
</body>
</html>

2、迭代对象数组

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app"><!-- 注意：数组中的元素是自定义的对象时直接通过"."存取器来获取元素。  --><p v-for="(user, i) in list">Id：{{user.id}} , 姓名：{{user.name}} , 索引：{{i}}</p></div><script>var vm = new Vue({el: '#app',data: {list: [{ id: 1, name: '张三' },{ id: 2, name: '李四' },{ id: 3, name: '王五' },{ id: 4, name: '小明' }]}});</script>
</body>
</html>

3、迭代对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app"><!-- 注意：在遍历对象身上的键值对时，除了有val、key,还有索引  --><p v-for="(val, key, i) in user">val:{{ val }} , key:{{key}} , 索引:{{i}}</p></div><script>var vm = new Vue({el: '#app',data: {user: {id: 1,name: 'tom',gender: '男'}},methods: {}});</script>
</body>
</html>

4、迭代数字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app"><!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 --><p v-for="i in 5">这是第 {{ i }} 次循环</p></div><script>var vm = new Vue({el: '#app',data: {},methods: {}});</script></body>
</html>

5、循环中key属性的使用

当 Vue.js 用 v-for 更新已渲染过的元素列表时，它默认用 “就地复用” 策略。即如果数据项的顺序被改变，Vue不是移动 DOM 元素来匹配数据项的顺序，而是简单地复用此处的元素，并且确保它在特定索引下显示已被渲染过的每个元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app"><div>Id: <input type="text" v-model="id">Name: <input type="text" v-model="name"><button @click="add">添加</button></div><div v-for="item in list" ><input type="checkbox">{{item.id}}：{{item.name}}</div></div><script>var vm = new Vue({el: '#app',data: {id:'',name:'',list: [{ id: 1, name: '张三' },{ id: 2, name: '李四' },{ id: 3, name: '王五' },]},methods: {add() { this.list.unshift({ id: this.id, name: this.name })}}});</script>
</body>
</html>

通过上面的演示可以发现：原来勾选的是id为2的选项，但是当插入新的一行的时候，被选中的就变为1了。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每一项提供唯一的key 属性。

<div v-for="item in list" :key='item.id'><input type="checkbox">{{item.id}}：{{item.name}}
</div>

使用 v-for 指令循环遍历时需要注意以下几点：

v-for 循环时，key 属性只能使用 number 或者 string。
key 属性在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值。
在组件或者一些特殊情况中使用 v-for 循环时，如果 v-for 有问题，必须在使用 v-for 的同时，指定唯一的key 属性。

【Vue】v-if 、v-show、v-for指令，最基础的流程控制和循环处理相关推荐

PLC流程控制类指令(JMP)编程应用
跳转类指令都属于程序流程控制类指令,可以控制程序的执行流.跳转指令和跳转标签必须要在同一个块内(FB/FC),块内跳转标签必须要唯一.本文同时给出博途PLC梯形图模式下如何实现FOR循环功能FC的2种 ...
tx2 fpga pcie无法读写_Cyclone V SOC(ARM+FPGA)开发文档_之开发流程详解
双击可查看大图(手动狗头) 目录 Altera Cyclone V soc开发文档之软硬件开发 1 Cyclone V开发流程介绍 5 专业术语 5 Cyclone V软件开发介绍 6 U-BOOT ...
ubuntu arm qt_Cyclone V SOC(ARM+FPGA)开发文档_之开发流程详解
双击可查看大图(手动狗头) 目录 Altera Cyclone V soc开发文档之软硬件开发 1 Cyclone V开发流程介绍 5 专业术语 5 Cyclone V软件开发介绍 6 U-BOOT ...
c语言求最多啤酒数,C语言，算法、动态规划:有一个箱子的容量为v(正整数，0=v=20000),同时有n个物品(0n=30)，...
满意答案 24k纯真爱l 2013.11.07 采纳率:42% 等级:12 已帮助:9552人 #include #define N 30 int xiangzi(int n ,int V ,i ...
T a(v);和T a = v;的区别
本文所说的类型T均指UDT,非built-in类型构造一个对象,有如下三种形式: 1.T a; 这个没什么好说的,调用default ctor来构造a 不过要注意的是,要么T就一个ctor也没有,编 ...
v.douyin.com/xxx v.ixigua.com/xxx抖音西瓜网址官方生成制作抖音西瓜缩短口令网址(仅供参考学习)
抖音短链:https://v.douyin.com/2vGHjMu/(仅限抖音打开) 西瓜短链:https://v.ixigua.com/2oXjpMN/ v.douyin.com是抖音官方的接口,可 ...
金山发布毒霸V及网镖V新品坚持高定价策略 (转)
金山发布毒霸V及网镖V新品坚持高定价策略 (转)[@more@] 6月3日晚,瑞星突然宣布,给用户和经销商让利2200万,并将单机版产品建议零售价调低30元,零售价格降至138元.同夜,江民宣布, ...
金山发布毒霸V及网镖V新品坚持高定价策略
6月3日晚,瑞星突然宣布,给用户和经销商让利2200万,并将单机版产品建议零售价调低30元,零售价格降至138元.同夜,江民宣布,将以38元的超低价位推出一款杀毒软件-KV江民杀毒王DOS杀毒伴侣.已 ...
matlab 算 cramer s v,基于Cramer’s V指数的遥感影像特征选择方法专利_专利查询 - 天眼查...
1.基于Cramer' S V指数的高分辨遥感影像特征选择方法,其特征在于:包括以下步骤: 步骤1 :对获取的遥感影像进行预处理以及影像特征提取: 步骤2 :基于Cramer' s V关联指数的连续 ...