Vue - v-for

最新推荐文章于 2024-07-18 18:59:22 发布

学习中的小菜鸟.

最新推荐文章于 2024-07-18 18:59:22 发布

阅读量105

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_33962481/article/details/119110246

版权

Vue 专栏收录该内容

48 篇文章 2 订阅

订阅专栏

文章目录

一、v-for遍历数组
二、v-for遍历对象
三、v-for一般都需要绑定一个key
- 遍历列表时key的作用
- - 如果节点里面包含输入类的DOM, 就会发生错误

一、v-for遍历数组

<body>
  <div id="app">
    <ul>
      <li v-for="item in movies">{{item}}</li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        movies: ["电影1","电影2","电影3"]
      }
    })
  </script>
</body>

二、v-for遍历对象

<body>
  <div id="app">
    <ul>
      <li v-for="(value, key) in person">{{key}} - {{value}}</li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        person: {
          name: "zhangsan",
          age: 18,
          height: 1.88
        }
      }
    })
  </script>
</body>