学学Vue(04)-列表渲染携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情 >>

v-for的基本使用

在data 中定义的可迭代对象都可以进行列表渲染，使用形如item in movies ，现在也可以使用item of movies 效果相同，item 就是当前取到的条目，如果想要使用index 即表示当前是第几个条目的时候，就直接使用(item,index) in movies ，index从0开始

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item{
      margin-top: 5px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>电影列表</h2>
    <ul>
      <li v-for="(item,index) in movies">{{index}}-{{item}}</li>
    </ul>
    <h2>商品列表</h2>
    <div v-for="(item,index) in products" class="item">
      <h3>{{item.name}}</h3>
      <span>{{item.price}}</span>
      <p>{{item.desc}}</p>
    </div>
  </div>
  <script src="../lib/vue.mini.js"></script>
  <script>
    const app=Vue.createApp({
      data(){
        return{
          movies:['星际穿越','少年派','大话西游'],
          products:[
            {
              id:110,
              name:'MacBook',
              price:9,
              desc:'9.9秒杀'
            },
             {
              id:110,
              name:'MacBook',
              price:9,
              desc:'9.9秒杀'
            },
             {
              id:110,
              name:'MacBook',
              price:9,
              desc:'9.9秒杀'
            }
          ]
        }
      }
    })
    app.mount('#app')
  </script>
</body>
</html>

v-for的其他类型

当遍历对象的时候，我们还可以获取对象中的key ，如下所示，使用形如(item,key,index) in info 来获取条目、key和位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item{
      margin-top: 5px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
   <ul>
    <li v-for="(item,key,index) in info">{{item}}-{{key}}-{{index}}</li>
   </ul>
    
  </div>
  <script src="../lib/vue.mini.js"></script>
  <script>
    const app=Vue.createApp({
      data(){
        return{
          info:{
            name:'why',
            age:10,
            height:18.8
          }
        }
      }
    })
    app.mount('#app')
  </script>
</body>
</html>