前面我们和大家分享了vue组件中v for指令介绍及使用v-for出现告警问题解析内容，本文我们将和大家分享vue v-for 数据处理，v-for的基本使用 ：使用 v-for="item in list" 或者 v-for="item of list" 进行遍历，使用list:list:[{n:1},{n:2},{n:3},{n:4},{n:5},{n:6}] 时为了方便扩展， 更贴近实际项目需求。
<p id="app">
<ul>
<li v-for="item in list">{{item.n}}</li>
</ul>
</p>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
list:[{n:1},{n:2},{n:3},{n:4},{n:5},{n:6}]
}
})
</script>v-for 给了两个参数 key 和 index
这里需要对遍历的数据 分为 数组 和 对象分别对待
数组下是没有 key值的
而对象下可以得到参数key值 实际显示效果如下：
立即学习“前端免费学习笔记（深入）”；
<p id="app">
<ul>
<li v-for="(item,index,key) of list">{{item.n}}
<p>index={{ index }}</p>
<p>key={{key}}</p>
</li>
</ul>
<p>
<p v-for="(item,key,index) of obj">
{{item}}：{{key}}：{{index}}
</p>
</p>
</p>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
obj:{color:'red',age:18,sex:'girl'}
}
})
</script>v-for支持等数迭代
v-for="n
in 10"
借助这个可以分步加载 数据，控制m值就行了
<p v-for="i of m">
{{list[i-1].n}}
</p>
</p>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
m:3,
list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
obj:{color:'red',age:18,sex:'girl'}
}
})
</script>注意：
遍历对象时使用不能this绑定组件，只能在处理函数中传入index 或其他的一些特征值来对当前list选定，再进行操作。
<ul>
<li v-for="(item,index,key) of list">{{item.n}}
<p>index={{ index }}</p>
<p>key={{key}}</p>
<p v-on:click="removethis(index)">remove this</p>
</li>
</ul><br>
methods:{
removethis:function(index){
this.list.splice(index,1)对data 的数组app.list[1]={n:33}直接赋值操作不能触发页面更新
所以vue js 提供了Vue.set(app.list,1,{n:33})的数组数据更新方法。
相关推荐：
vue组件中v for指令介绍及使用v-for出现告警问题解析
以上就是实例讲解vue v-for 数据处理的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
462
