<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历数组</title>
<script src="../lib/js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-for 循环 普通数组 i 为索引-->
<p v-for="(item,i) in list"> {{ i }} - - - {{ item }} </p>
<!-- v-for 循环 对象数组 -->
<p v-for="(user,i) in list2"> {{ i }} - - - {{ user.id }} - - - {{ user.name }} </p>
<!-- v-for 循环 对象
注：在遍历对象身上的键值对时，除了有 value 和 key ，在第三个位置还有一个 索引
-->
<p v-for="(value,key,i) in user">索引：{{ i }} - - - 值：{{ value }} - - - 键：{{ key }} </p>
<!-- v-for 迭代 数字 ,前面的 count 值从 1 开始-->
<p v-for="count in 10">这是第 {{ count }} 次循环</p>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
list:[1,2,3,4,5,6,7,8,9],
list2:[
{id:1,name:'秦始皇'},
{id:2,name:'刘邦'},
{id:3,name:'汉武帝'},
{id:4,name:'汉文帝'},
{id:5,name:'刘备'}
],
user:{
id:1,
name:'武则天',
gender:'女'
}
},
methods:{}
})
</script>
</body>
</html>
Day1.11 v-for 四种使用方式
猜你喜欢
转载自www.cnblogs.com/zhaohui-116/p/12007301.html
今日推荐
周排行