Vue指令之 v-for的使用

最新推荐文章于 2024-08-26 15:50:40 发布

HOLD ON!

最新推荐文章于 2024-08-26 15:50:40 发布

阅读量217

点赞数

原文链接：https://blog.csdn.net/xukongjing1/article/details/81584890

版权

Vue指令之 v-for的使用

北海之灵

迭代普通数组

在data中定义普通数组

data:{
      list:[1,2,3,4,5,6]
}

在html中使用 v-for 指令渲染
<p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p>

迭代对象数组

在data中定义对象数组

data:{
      list:[1,2,3,4,5,6],
      listObj:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'},
        {id:4, name:'zs4'},
        {id:5, name:'zs5'},
        {id:6, name:'zs6'},
      ]
}

在html中使用 v-for 指令渲染
<p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p>

迭代对象

在data中定义对象

data:{
      user:{
        id:1,
        name:'托尼.贾',
        gender:'男'
      }
}

在html中使用 v-for 指令渲染
<p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>

迭代数字

<p v-for="count in 10">这是第{{count}}次循环</p>
完整代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='app'>

<p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p>
<br/>

<p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p>
<br/>

<p v-for="(val,key) in user">--键是--{{key}} --值是--{{val}}</p>
<br/>


<p v-for="count in 10">这是第{{count}}次循环</p>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
list:[1,2,3,4,5,6],
listObj:[
{id:1, name:'zs1'},
{id:2, name:'zs2'},
{id:3, name:'zs3'},
{id:4, name:'zs4'},
{id:5, name:'zs5'},
{id:6, name:'zs6'},
],
user:{
id:1,
name:'托尼.贾',
gender:'男'
}
}
});
</script>
</html>