Vue.js 循环语句 v-for指令

最新推荐文章于 2023-04-20 21:05:33 发布

Mr_Bobcp

最新推荐文章于 2023-04-20 21:05:33 发布

阅读量1.6w

点赞数 2

分类专栏： Vue 文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/Mr_Bobcp/article/details/109319548

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue.js循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
注意：

v-for循环的时候，key属性只能使用number或String。
key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值。
在组件中使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型 :key值。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id='app'>
  	<!--对象和索引值写法是自定义的，注意顺序-->
    <!--v-for循环普通数组 -->
    <p v-for="(item,index) in List">索引值---{{i}}   每一项---{{item}}</p>
    <br/>
    <!--v-for循环对象数组-->
    <p v-for="(Obj,i) in ListObj">id---{{Obj.index}}   姓名---{{Obj.name}}</p>
    <br/>
    <!--注意，在遍历对象的键值对的时候，除了有 val 和 key,在第三个位置还有一个索引-->
    <p v-for="(val,key) in User">键是---{{key}}  值是---{{val}}</p>
    <br/>
    <!-- in 后面我们放过数组、对象数组、对象，还可以放数字-->
    <!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
    <p v-for="count in 10">第---{{count}}---次循环</p>
  </div>
</body>
<script src="vue.min.js"></script>
<!--在线测试替换<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      List:[1,2,3],
      List_Obj:[
        {index:1, name:'Mr1'},
        {index:2, name:'Mr2'},
        {index:3, name:'Mr3'}
      ],
      User:{
        id:1,
        age: 20,
        name:'Vue指令',
        gender:'男'
      }
    }
  });
</script>
</html>

输出的结果参考

索引值--- 每一项---1

索引值--- 每一项---2

索引值--- 每一项---3



键是---id 值是---1

键是---age 值是---20

键是---name 值是---Vue指令

键是---gender 值是---男


第---1---次循环

第---2---次循环

第---3---次循环

Mr_Bobcp

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 循环语句 v-for指令

Vue.js循环使用 v-for 指令。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。注意：v-for循环的时候，key属性只能使用number或String。key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值。在组件中使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型 :key值。<html>
复制链接

扫一扫