VUE3中 v-for指令用法，列表循环

 一，v-for指令简介：

v-for指令需要以 item in list形式的特殊语法，list是源数据数组， item 是数据组元素迭代的别名

可以使用v-for指令对数组进行循环，示例如下：

    const app = Vue.createApp({
        data() {
            return {
                list:['haha','doms','呵呵']
              }  
         },

        template: `
            <div>
               <div v-for = "item in list">
                 {
  {item}}
               </div>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

打印结果：

 

二，v-for循环渲染：

1，v-for对数组进行循环外

第一个参数是原数据 ，第二参数 index：

index：指的是当前循环的下标，或者第几次循环，

   示例如下：

    const app = Vue.createApp({
        data() {
            return {
                list:['haha','doms','呵呵']
              }  
         },

        template: `
            <div>
               <div v-for = "(item,index) in list">
                 {
  {item}} -->{
  {index}}
               </div>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

打印结果：

2，v-for对对象进行循环：

 此时第一个参数是 属性值 value，第二个参数是key，第三个参数是index（下标）

示例如下：

   const app = Vue.createApp({
        data() {
            return {
                listArray:['haha','doms','呵呵'],
                listObject:{
                    name: 'muzili',
                    sex: 'girl',
                    job: 'engineer'
                },

              }  
         },

        template: `
            <div>