vue2中v-for的使用

华、、

于 2024-03-23 10:45:00 发布

阅读量334

点赞数 7

分类专栏：前端 vue v-for 文章标签：前端开发语言 vue

本文链接：https://blog.csdn.net/2201_75918981/article/details/136920185

版权

前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

v-for

1 篇文章 0 订阅

订阅专栏

vue2中v-for主要是用来遍历和通过数据多次渲染页面。

语法：v-for="(item,index) in 数组名"

例如我们执行以下代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul class="first">
    <li v-for="(item,index) in list">{{index+1}}---{{item.name}}</li>
  </ul>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    const div = new Vue({
      el: 'ul',
      data: {
        list: [
          { id: 0, name: '《水浒传》' },
          { id: 1, name: '《三国志》' },
          { id: 2, name: '《西游记》' },
          { id: 3, name: '《红楼梦》' },
          { id: 4, name: '《骆驼祥子》' },
          { id: 5, name: '《围城》' },
          { id: 6, name: '《狂人日记》' },
        ]
      }
    })

  </script>
</body>

</html>

我们通过v-for多次渲染<li></li>标签，因为list中有七条数据，所以渲染出了七个<li></li>，里面通过插值表达式{{index+1}}得到数组下标加1作为序号，然后再通过{{item.name}}拿到书名，执行结果如下：

我们再执行如下代码，加深理解：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul class="first">
    <li v-for="item in 9">{{item}}</li>
  </ul>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    const div = new Vue({
      el: 'ul',
      data: {
      }
    })

  </script>
</body>

</html>

我们通过v-for多次渲染<li></li>标签，因为9中有9个数据，所以渲染出了9个<li></li>，里面通过插值表达式{{item}}拿到数字1-9，执行结果如下：