vue v_for,vue v for
本文主要介绍了Vue指令的v-for指令，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
使用VUE v-for 1。迭代普通数组2。迭代对象数组3。迭代对象4。使用迭代数字v-for 1的最佳技巧。对于循环2，始终使用V-中的key2。不要在循环中使用v-if3。在数据遍历之前使用计算的属性或方法处理数据4。在范围5内循环。访问循环6中的项目索引。
Vue v-for的使用
1.迭代普通数组
在数据中定义一个普通数组
数据：{
列表：[1，2，3，4，5，6]
}
在html中使用v-for命令呈现
P-for= (item，I)in list -索引值-{ { I } }-每个项目-{{item}}/p
2.迭代对象数组
在数据中定义对象数组
数据：{
列表：[1，2，3，4，5，6]，
listObj:[
{id:1，姓名： zs1}，
{id:2，姓名： zs2}，
{id:3，名称： zs3}，
{id:4，名称： zs4}，
{id:5，姓名： zs5}，
{id:6，名称： zs6}，
]
}
在html中使用v-for命令呈现
P-for= (user，I)in list obj -id-{ { user . id } }-name-{ { user . name } }/p
3.迭代对象
定义数据中的对象
数据：{
用户：{
id:1，
姓名：托尼贾，
性别：“男性”
}
}
在html中使用v-for命令呈现
P-for= (val，key)in user -key is-{ { key } }-value is-{ { val } }/p
4.迭代数字
！-注意：如果v-for用于迭代数字，则先前计数的值从1-开始
P-for=从10开始计数这是第{{count}}次循环/p
完整代码：
超文本标记语言
头
meta http-equiv= Content-Type Content= text/html；charset=utf-8 /
/头
身体
div id=应用程序
！-V-for循环普通数组-
P-for= (item，I)in list -索引值-{ { I } }-每个项目-{{item}}/p
br/
！-v-for循环对象数组-
P-for= (user，I)in list obj -id-{ { user . id } }-name-{ { user . name } }/p
br/
！-注意，在遍历对象的键值对时，除了val和key-之外，第三个位置还有一个索引
P-for= (val，key)in user -key is-{ { key } }-value is-{ { val } }/p
br/
！-in之后，我们放开数组、对象数组、对象和数字-
！-注意：如果v-for用于迭代数字，则先前计数的值从1-开始
P-for=从10开始计数这是第{{count}}次循环/p
/div
/body
脚本src=vue.min.js/script
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
列表：[1，2，3，4，5，6]，
listObj:[
{id:1，姓名： zs1}，
{id:2，姓名： zs2}，
{id:3，名称： zs3}，
{id:4，名称： zs4}，
{id:5，姓名： zs5}，
{id:6，名称： zs6}，
],
用户：{
id:1，
姓名：托尼贾，
性别：“男性”
}
}
});
/脚本
/html
截图：
v-for的最佳使用技巧
在vuejs中，v-for的使用相当普遍，它允许你在模板代码中编写for循环。那么在使用v-for的时候，有没有想过一些使用这个指令的技巧呢？
在介绍它的使用技巧之前，我先介绍一下它的基本用法。在vue中，v-for可以遍历数组、对象和字符串，但最常用的方法是遍历数组。基本方法如下：
div id=应用程序
保险商实验所
li v-for=列表中的项目
{{ item.name }}
/李
/ul
/div
可能有些初学者在使用时没有考虑太多技巧，直接遍历data中定义的数据。其实vue的设计初衷也是考虑到了这个问题。如果频繁使用data中的数据，可能会造成一些性能消耗，相当不友好。
在本文中，我将介绍六种方法，让您的v-for代码更加准确、可预测和强大。
1.始终在v-for循环中使用key
建议在遍历数据时，尽量添加key，并设置唯一的key属性，这样可以保证组件按照你期望的方式工作。有时候，使用索引index是可以的，但是在一些特定场景下，比如多场景登录，如果不使用key来标识当前使用的登录方式，可能会造成数据混乱。如果数据量很大，页面的数据更新时，渲染数据会消耗很多性能，甚至会出现不可预测的bug。如果我们对每个元素都有一个惟一的键引用，那么我们就可以更好更准确地预测DOM将如何操作，从而避免许多不必要的问题。
div id=应用程序
保险商实验所
li v-for=列表中的项目:key=item.id
{{ item.name }}
/李
/ul
/div
2.不要在循环中使用v-if
一个超级常见的错误就是用v-if过滤v-for循环的数据。Vuejs优先考虑v-for而不是v-if，这意味着组件将遍历每个元素，然后检查v-if条件以确定是否应该呈现它。所以，其实不管什么条件，数组都会被遍历。虽然这看起来很直观，但它会导致巨大的性能问题。
/*千万不要这样写，切记切记*/
div id=应用程序
保险商实验所
li v-for=列表中的项目
:key=item.id
v-if=item.price50
{{ item.name }}
/李
/ul
/div
3.使用计算属性或方法来处理数据后再做数据遍历
为了避免上述问题，我们应该在遍历模板之前过滤模板中的数据。有两种非常相似的方法。
使用计算属性使用过滤方法首先，我们只需要设置一个计算属性。为了获得与前面的v-if相同的功能，代码应该如下。
div id=应用程序
保险商实验所
李v-for=物品价格过低
:key=item.id
{{ item.name }}
/李
/ul
/div
脚本
导出默认值{
data () {
返回{
列表：[]
}
},
计算值：{
subprice:function(){
返回this . list . filter(item=item . price 50)
}
}
}
/脚本
计算是作为一种属性，而不是一种方法。使用computed，您可以缓存数据。每次渲染数据，都会优先在缓存中查找数据。如果有，可以直接从缓存中拿出来渲染。没有的话可以再去拿。这也大大提高了性能。
或者您可以使用过滤变量、处理变量然后遍历变量的方法。
div id=应用程序
保险商实验所
Li v-for= item in under price handle(50)
:key=item.id
{{ item.name }}
/李
/ul
/div
脚本
导出默认值{
data () {
返回{
列表：[]
}
},
方法：{
underPriceHandle:功能(价格){
返回this . list . filter(item=item . price价格)
}
}
}
/脚本
4.在一个范围内循环
虽然在大多数情况下，v-for用于遍历数组或对象，但在某些情况下，我们肯定只想循环一定次数。
例如，假设我们正在为一个在线商店创建一个分页系统，我们只想在每页显示10个产品。使用一个变量来跟踪当前页码，我们可以像这样处理分页。
保险商实验所
li v-for=index in 10 :key=index
{{书籍[第10页索引] }}
/李
/ul
5.在循环中访问项目的索引
除了遍历数组和访问每个元素，我们还可以跟踪每个项目的索引。
为此，我们必须在项目后添加一个指标值。它非常简单，可用于分页、显示列表索引、显示排名等。
保险商实验所
li v-for=(item，index) in products :key=item.id
{{ index }} - {{ item.name }}
/李
/ul
6.遍历一个对象
我们还可以使用v-for轻松地遍历对象的键值对。
类似于访问元素的索引，我们必须向循环中添加另一个值。如果我们用一个参数遍历一个对象，我们将遍历所有的项。
如果我们添加另一个参数，我们将获得items和key，如果我们添加第三个，我们也可以访问v-for循环的索引。
保险商实验所
li v-for=(list，index) in lists :key=list.id
span v-for=(item，key，index) in list :key=key
{{ item }}
/span
/李
/ul
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。