Vue v-for指令
Posted //我是小白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue v-for指令相关的知识，希望对你有一定的参考价值。
列表渲染 v-for 指令的使用
v-for指令可以用来遍历数组/对象，它可以根据data中数据的更新动态刷新视图
-
遍历数组
1.1 使用方式： v-for=“item in arr” item是一个参数，表示数组中的每一项，arr也是一个参数，表示你要遍历的数组
1.2 使用方式： v-for="(item, index) in arr" index表示数组项的索引 ⭐ -
遍历对象
2.1 使用方式：v-for=“value in obj” value 表示对象的属性的值 obj就是需要遍历的对象
2.2 使用方式：v-for="(value, key, index) in obj" key表示对象的键 index表示这个对象属性的索引，类似上面的数组的index
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 本案例演示遍历显示出数组中的每一项元素 -->
<div id="box">
<ul>
<li v-for="(value,index) in emp" >
<a href="#">{{index+1}}:{{value}}</a>
</li>
</ul>
</div>
<script src="JS/vue.min.js""></script>
<script>
var ve=new Vue({
el:"#box",
data:{
emp:[
"项目经理",
"总监",
"程序员"
]
}
})
</script>
</body>
</html>
以上是关于Vue v-for指令的主要内容，如果未能解决你的问题，请参考以下文章