Vue的列表渲染指令v-for怎么使用

v-for="item in 数组"

v-for="(item, index) in 数组"

    商品:{{item.name}}
    价格:{{item.price}}
    
秒杀：{{item.desc}}

2、遍历对象
⭐⭐
v-for也支持遍历对象，并且支持有一二三个参数：

• 一个参数： “value in object”;

• 二个参数： “(value, key) in object”;

• 三个参数： “(value, key, index) in object”;

v-for同时也支持数字的遍历：
每一个item都是一个数字；

      

        
          {{value}} - {{key}} - {{index}}
        
      
 
 const app = Vue.createApp({
        data() {
          return {
            info: { bame: "why", age: 18, height: 1.88 },
          };
        },
      });
app.mount("#app");

3、遍历字符串

{{item}}

1.2.v-for和template

⭐⭐
我们可以使用templ元素来循环渲染一段包含多个元素的内容

为什么这里不使用div呢？

我之前学的时候也没有怎么考虑这个，整理笔记的时候发现了这个问题

原因：

• 如果是div包裹的话，div也会被渲染出来

• 而使用template包裹的话，template并没有被渲染，相较于使用div会节省一个没有必要的div标签的使用。

其实，template的作用就是模板占位符，可以帮助我们包裹元素，在循环的过程总，template不会被渲染到页面上。

• div(如果div没有实际的意义，那么可以使用template替换)

        {{value}}
        {{key}}
        {{index}}