Vue-16、Vue列表渲染（v-for的使用）
发布时间
阅读量：
阅读量
1、vue遍历数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<ul>
<h2>人员列表</h2>
<li v-for="person in persons" :key="person.id">
{{person.id}}-{{person.name}}-{{person.age}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;
new Vue({
el:"#root",
data:{
persons:[
{id:1,name:'张三',age:18},
{id:2,name:'李四',age:19},
{id:3,name:'王五',age:20},
],
},
})
</script>
</body>
</html>
javascript
也可以这样写
<li v-for="(p,index) in persons" :key="index">
{{p.id}}-{{p.name}}-{{p.age}}
</li>
javascript
2、遍历对象
<li v-for="(value,key) in car" :key="key">
{{key}}-{{value}}
</li>
javascript
全部评论 (0)
还没有任何评论哟~