1.指令v-for-遍历数组

反复生成多个相同结构的HTML元素
用法：

<要反复生成的元素 v-for="(item, index) of 数组"/>

原理:

当new Vue()扫描到这里时，自动遍历of后的数组中每个元素
每遍历一个元素，就创建一个当前HTML 元素的副本
of前的两个变量:item会自动获得当前正在遍历的数组元素值，index会自动获得当前正在遍历的下标位置
如果当前元素或子元素中，需要使用当前正在遍历的元素值或下标，可用绑定语法来绑定item和index的值。

强调:

v-for一定要放在那个要反复生成的元素上，而不是放在父元素上！
item和index的使用范围仅限于当前元素及其子元素范围内，不能在当前元素外使用！

案例
显示数组各元素的内容，遍历数组元素，反复生成多个相同结构的元素。
参考代码如下：

<body><div id="app"><ul><!--本例中: 因为要反复生成多个li，所以v-for要写在li上，而不是li的父元素ul上--><li v-for="(value,i) of cellphone" :key="i">手机品牌{{i+1}}: {{value}}</li></ul></div><script>var vm = new Vue({el: "#app",data: {cellphone: ["华为", "苹果", "小米", "三星"],},});</script>
</body>

官网学习
https://cn.vuejs.org/v2/guide/list.html#用-v-for-把一个数组对应为一组元素

2.指令v-for遍历对象中每个属性

v-for还可以遍历对象中每个属性，反复生成多个html元素。

案例
显示一个商品对象的所有属性值，参考代码如下：

<body><div id="app"><!--希望遍历data中一个对象的每个属性，反复生成多个相同结构的HTML元素--><ul><li v-for="(value,key) of goods" :key="key">{{key}} : {{value}}</li></ul></div><script>var vm = new Vue({el: "#app",data: {goods: {id: 11,name: "华为手机",title: "2022新款 爆销售202220222022",price: 12.78,},},});</script>
</body>

官网学习
https://cn.vuejs.org/v2/guide/list.html#在-v-for-里使用对象

3.指令v-for-数数

指令v-for还可以数数: 给v-for指定一个数字，他可以生成从1开始依次递增的一个序列！

<要反复生成的元素 v-for="index of 数字"/>

案例
根据页数生成指定个数的分页按钮，参考代码如下：

<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>ul {list-style: none;}ul>li {margin: 2px;float: left;border: 1px solid #555;width: 36px;height: 36px;line-height: 36px;text-align: center;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="app"><ul><li v-for="i of pageCount" :key="i">{{i}}</li></ul></div><script>var vm = new Vue({el: "#app",data: {pageCount: 7,},});</script>
</body>

官网学习
https://cn.vuejs.org/v2/guide/list.html#在-v-for-里使用值范围

4.指令v-for-遍历对象数组

在实践中用的比较多的是遍历对象数组，对象数组页是一个数组，其数组元素的类型是对象，比如购物车数组，其元素是一个个的商品对象。

案例
显示购物车商品信息，参考代码如下：

<body><div id="app"><h3>总计: ¥{{total.toFixed(2)}}</h3><ul><li v-for="(item,i) of cart" :key="i">{{item.pid}} | {{item.pname}} | ¥{{item.price.toFixed(2)}} |{{item.count}} —— 小计：¥{{(item.price*item.count).toFixed(2)}}</li></ul><h3>总计: ¥{{total.toFixed(2)}}</h3></div><script>var vm = new Vue({el: "#app",data: {cart: [{ pid: 1, pname: "华为", price: 4455, count: 2 },{ pid: 2, pname: "小米", price: 3455, count: 1 },{ pid: 3, pname: "OPPO", price: 3356, count: 3 },],},methods: {//方法},computed: {//属性，所以用法同属性的用法——一定不要不加()total() {console.log("调用了一次total()");var sum = 0;for (var p of this.cart) {sum += p.price * p.count;}return sum;},},});//测试: 在F12->console->vm.cart[1].count++</script>
</body>

5.指令v-for使用要点

指令v-for要放在那个要反复生成的元素上，而不是放在父元素上
指令v-for遍历用到的参数使用范围是局部的

指令v-for遍历用到的参数item和index的使用范围仅限于当前元素及其子元素范围内，不能在当前元素外使用。

不能用下标直接更改数组值

使用v-for时，这里有个坑:

如果v-for遍历的是数组，在程序中通过下标修改数组元素的值，页面上的HTML元素不会自动更改！
比如: this.teachers[0]=“燕儿”
页面上是不会变的！因为数组中的数字类型的下标0、1、2…无法添加访问器属性，也就不受监控！

解决:

vue中修改数组中的元素值！必须用数组函数！才能自动更新页面。因为函数都是受监控的。
比如: this.teachers.splice(0,1,“燕儿”)
删除0位置的1个元素，再在0位置放入值"燕儿"
结果: 页面会自动变化！

官网学习
https://cn.vuejs.org/v2/guide/reactivity.html#对于数组

指令v-for的使用需要加key属性

其实每次使用v-for时，都要同时绑定:key=“index”。因为v-for反复生成的多个元素，除了内容不同之外，从元素属性上来看多个元素毫无差别！每个反复生成的元素都是一样的。所以，如果将来修改了数组中一个元素时，v-for因为无法识别每个HTML元素，所以只能把所有的HTML元素重新生成一遍——效率低！

如果给每个元素都绑定:key="index"属性，则每个HTML元素上都有一个唯一的标识key=“0” key=“1” … 。当将来修改了数组中每个位置的元素时，只需要修改对应key的HTML元素即可，其他HTML元素保持不变！——效率高！

1). 当遍历数组时: <元素 v-for=“(item,index) of 数组” :key=“index” />

Key的值依次是0 1 2 3…

2). 当遍历对象时: <元素 v-for=“(value,key) of 对象” :key=“key”

Key的值依次是: 属性名1 属性名2 …

因为一个对象内的属性名肯定不会重复，所以，属性名也可以当做:key唯一标识一个HTML元素

官网学习
https://cn.vuejs.org/v2/guide/list.html#在组件上使用-v-for

Vue教程0207-Vue列表渲染相关推荐

vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{b:function(){ //默认调用getreturn 值}}--------------------------c ...
【Vue教程四】条件渲染、列表渲染、数组更新
一.条件渲染:[v-if][v-show] 1.v-if 指令用于条件性地渲染一块内容. 1.1.在元素中使用 v-if 指令: <body><div id="app&qu ...
Vue.js 第二天: 列表渲染
用v-for 把一个数组对应为一组元素我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 it ...
Vue指令篇_v-for_列表渲染
今天要写的是Vue很香的一个指令v-for,这个指令在结构中实现循环,基于数据多次渲染元素,在减少代码量的情况下,又使得逻辑关系一目了然,很奈斯.不多说啦,就开始吧. 目录 1.使用方法 1)v-fo ...
Vue.js入门学习--列表渲染--v-for遍历数组生成元素（四）
完整案列demo: <html><head><title>列表渲染--v-for遍历数组生成元素</title><script src=" ...
php 从大到小显示,vue.js,javascript_Vue 在列表渲染的时候，能排序显示么。比如按价格从大到小排序，vue.js,javascript - phpStudy...
Vue 在列表渲染的时候,能排序显示么. 比如按价格从大到小排序 // json { "data": [ { "name": "山鹰登山社" ...
Vue 2 | Part 5 列表渲染和事件监听
之前在vue里面绑定数据,都只是单个地绑定.这期我们来看一下怎样渲染列表,然后通过事件监听方法往列表里面增加item. 列表渲染废话不多说,直接上代码: <div id="app&q ...
【Vue教程】Vue.js推文
为什么前端工程师的需求这么大我国手机用户超过13亿,活跃智能机用户超过23亿部,全国网民人数约7.51亿.这么多人,每天都有几十分钟或者几个小时,要使用手机上网.全体中国人一年消费的网页和 App ...
vue教程 pdf vue权威指南
在实战之前,你需要对vuejs的基础语法有一定的了解,可以通过以下几个途径进行学习: vue.js官方文档:https://cn.vuejs.org/v2/guide/index.html 官方的文档 ...
vue学习笔记（二）- 数据绑定、列表渲染、条件判断
vue的数据绑定和列表渲染的造轮子 GitHub:八至作者:狐狸家的鱼双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面页面->数据适用:input.select. ...

Vue教程0207-Vue列表渲染

Vue列表渲染