vue学习 v-for循环普通数组 对象数组 迭代数字

Posted 2021-11-26 xuchao0506

//html
<div id="app">
　<p v-for="item in list">{{item}}</p>
　<p v-for="(item, i) in list">索引{{i}}---值{{item}}</p>
　<p v-for="user in list2">id是{{user.id}}---名字是{{user.name}} </p>
　<p v-for="(user,i) in list2">id是{{user.id}}---名字是{{user.name}}---索引是{{i}}</p>
　//遍历对象身上的属性和值，除了有key value 在第三个位置上还有一个索引
　<p v-for="(key,value,i) in user">键是{{key}}---值是{{value}}---索引是{{i}}</p>
　
　//迭代数字 迭代从1开始
  <p v-for="count in 10">这是第{{count}}次循环</p>
</div>

//script
<script>
　　var vm = new Vue({
　　　　el:‘app‘,
　　　　data:{
　　　　　　list:[1,2,3,4,5,6,7]，
　　　　　　list2:[
　　　　　　　　{ id:1, name:‘小白‘ },
　　　　　　　　{ id:2, name:‘小黑‘ }，
　　　　　　　　{ id:3, name:‘小黄‘ }
　　　　　　],
　　　　　　user:{
　　　　　　　　id:1,
　　　　　　　　name:‘小红‘,
　　　　　　　　gender:‘女‘
　　　　　　}
　　　　},
　　　　methods:{//methods中定义了当前vue实例中所有可用的方法
　　　　　
　　　　}
　　})
</script>