【Vue】v-for列表渲染指令

最新推荐文章于 2024-08-28 18:19:04 发布

洛上言

最新推荐文章于 2024-08-28 18:19:04 发布

阅读量391

点赞数 1

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

本文链接：https://blog.csdn.net/qq_39921135/article/details/139295360

版权

Vue 专栏收录该内容

228 篇文章

订阅专栏

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于数据循环，多次渲染整个元素。 --> 数据指的是：数组、对象、数字…

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

item 是数组中的每一项
index 是每一项的索引，不需要可以省略
arr 是被遍历的数组
item作为对象是不能作为key的

示例代码

<body>

  <div id="app">
    <h3>小黑水果店</h3>
    <ul>
      <li v-for="(item, index) in list">
        {{ item }} - {{ index }}
      </li>
    </ul>

    <ul>
      <!-- 不需要索引可以省略，并且只有一个参数的时候，这个括号都可以省略了 -->
      <li v-for="item in list">
        {{ item }}
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['西瓜', '苹果', '鸭梨', '榴莲']
      }
    })
  </script>
</body>

此语法也可以遍历对象和数字

//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始

//遍历数字
<p v-for="item in 10">{{item}}</p>
item从 1 开始，到 10 结束