Vue的学习之路九：v-for

最新推荐文章于 2022-05-10 19:22:17 发布

亥虫

最新推荐文章于 2022-05-10 19:22:17 发布

阅读量3.4k

点赞数

分类专栏： # Vue 文章标签： html5 vue.js javascript html 前端

本文链接：https://blog.csdn.net/weixin_39020133/article/details/106298024

版权

Vue 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

<body>
    <div id="app">
      <!-- <p>{{list[0]}}</p>
      <p>{{list[1]}}</p>
      <p>{{list[2]}}</p>
      <p>{{list[3]}}</p>
      <p>{{list[4]}}</p>
      <p>{{list[5]}}</p> -->

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

      <!-- <p v-for="(item, i) in objList">索引值：{{ i }}---id值：{{ item.id }}---名字：{{ item.name }}</p> -->
      <!-- 注意：在遍历对象身上的键值对时，除了 val, key，在第三个位置还有一个索引 -->
      <!-- <p v-for="(val, key, i) in user">值：{{ val }}---键：{{ key }}---索引：{{ i }}</p> -->
      
      <!-- in 后面放过 普通数组、对象数组、对象，还可以是数字 -->
      <!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
      <p v-for="count in 10">这是第 {{ count }} 次循环</p>
    </div>

    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          list: [1, 2, 3, 4, 5, 6],
          objList: [
            { id: 1, name: 'zs1' },
            { id: 2, name: 'zs2' },
            { id: 3, name: 'zs3' },
            { id: 4, name: 'zs4' },
          ],
          user: {
            id: 1,
            name: '托尼老师',
            gender: '男',
          },
        },
        methods: {},
      })
    </script>
  </body>

这里学习v-for指令

循环普通数组：索引值：{{ i }}---每一项：{{ item }}
循环对象数组：索引值：{{ i }}---id值：{{ item.id }}---名字：{{ item.name }}
循环对象：第三个参数是索引：值：{{ val }}---键：{{ key }}---索引：{{ i }}
循环数字：这是第 {{ count }} 次循环，注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始

亥虫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue的学习之路九：v-for

<body> <div id="app"> <!-- {{list[0]}} {{list[1]}} {{list[2]}} {{list[3]}} {{list[4]}} {{list[5]}
复制链接

扫一扫

专栏目录