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>
               <div v-for = "(value,key,index) in listObject">
                 {{value}} --- {{key}}-->{{index}}
               </div>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

打印结果:

3,改变列表里的数据:

   示例如下:每次点击的时候给数组增加数据,

      为了让vue性能更高,用v-for指令时,给循环的的每一项增加一个key值,key值尽量是惟一的,只有唯一的可以给每个元素做区分;

     相比于DOM的变更,对比Key值效率更高

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

              }  
         },
         methods:{
            addDataBtn(){
                this.listArray.push('哈哈哈哈');
            }
         },
        template: `
            <div>
               <div v-for = "(item,index) in listArray" :key = "items">
                 {{item}} -->{{index}}
               </div>
               <button @click = "addDataBtn">增加</button>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

 打印结果:

三,v-for循环数组,更改数组 替换数组内容

如果我们循环的是一个数组,想让列表内容变多,有两种方法:数组的变更函数, 直接替换数据   和 直接更改数组内容是那种方式

1,数组的变更函数:

 数组的变更函数 :push (如上面的示例)、pop(从后往前删除数据)、shift(从数组开头删除数据),unshift(从数据开头添加数据),splice()、sort()、reverse()等等;

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

              }  
         },
         methods:{
            addDataBtn(){
                //数组的变更函数:
                // this.listArray.push('哈哈哈哈');
                // this.listArray.pop('哈哈哈哈');
                // this.listArray.shift('哈哈哈哈');
                this.listArray.unshift('哈哈哈哈');
            }
         },
        template: `
            <div>
               <div v-for = "(item,index) in listArray" :key = "items">
                 {{item}} -->{{index}}
               </div>
               <button @click = "addDataBtn">增加</button>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

 

2,直接替换数据:

 改变原有数组,生成新的数组,示例如下:

 

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

              }  
         },
         methods:{
            addDataBtn(){
                //数组的变更函数:
                // this.listArray.push('哈哈哈哈');
                // this.listArray.pop('哈哈哈哈');
                // this.listArray.shift('哈哈哈哈');
                // this.listArray.unshift('哈哈哈哈');
                
                //直接替换数组:
                this.listArray =['哈哈哈','巴拉巴拉'];//替换原有数据,生成新的数组

            }
         },
        template: `
            <div>
               <div v-for = "(item,index) in listArray" :key = "items">
                 {{item}} -->{{index}}
               </div>
               <button @click = "addDataBtn">增加</button>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

还可以用如下写法:

this.listArray = ['哈哈哈'].concat(['巴拉巴拉'])

对数组进行过滤:

this.listArray =['bye','world'].filter(item => item === 'item');//过滤出 ‘bye’ 给到listArray

3,直接更新数组的内容:

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

              }  
         },
         methods:{
            addDataBtn(){
                //数组的变更函数:
                // this.listArray.push('哈哈哈哈');
                // this.listArray.pop('哈哈哈哈');
                // this.listArray.shift('哈哈哈哈');
                // this.listArray.unshift('哈哈哈哈');

                //直接替换数组:
                // this.listArray =['哈哈哈','巴拉巴拉'];//替换原有数据,生成新的数组
                // this.listArray = ['哈哈哈'].concat(['巴拉巴拉'])
                // this.listArray =['bye','world'].filter(item => item === 'item');//过滤出 ‘bye’ 给到listArray

                 //直接更新数组的内容:
                 this.listArray[1] = '哈哈哈'
            }
         },
        template: `
            <div>
               <div v-for = "(item,index) in listArray" :key = "items">
                 {{item}} -->{{index}}
               </div>
               <button @click = "addDataBtn">增加</button>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

 

四,v-for循环对象,直接给对象添加内容

  示例如下:

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

            }
        },
        methods: {
            addDataBtn() {
                //直接添加对象内容,可以自动展示出来
                this.listObject.age = 80;
                this.listObject.sex = 'girl';
            }
        },
        template: `
            <div>
               <div v-for = "(item,index) in listObject" :key = "items">
                 {{item}} -->{{index}}
               </div>
               <button @click = "addDataBtn">增加</button>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

五,v-for循环可直接循环数字:

示例如下:

打印结果:

六,v-for做对象循环展示,如果不展示对象里某一个属性,方法如下:

示例如下:循环listObject对象,如果对象里的值 不等于 job 的时候,才展示,如果等于job的时候不展示;

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

            }
        },
        methods: {
            addDataBtn() {
                //直接添加对象内容,可以自动展示出来
                this.listObject.age = 80;
                this.listObject.sex = 'girl';
            }
        },
        template: `
            <div>
               <template v-for = "(value,key,index) in listObject" :key = "items">
                  <div v-if ="key !== 'job'">
                    {{value}}--{{key}} -->{{index}}
                  </div>
               </template>
               <div v-for ="item in 10">{{item}}</div>
               <button @click = "addDataBtn">增加</button>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

打印结果:template标签为占位符,不展示在页面中

 

 

相关推荐
<div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;"> </span> <div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;"> </span> <div style="color:rgba(0,0,0,.75);"> <div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;">当前课程商城项目的实战源码是我发布在 GitHub 上的开源项目 newbee-mall (新蜂商城),目前已有 6300 多个 star,</span><span style="color:#4d4d4d;">本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 商城项目功能的讲解,让大家实际操作并实践上手一个大型的线上商城项目,并学习到一定的开发经验以及其的开发技巧。<br /> 商城项目所涉及的功能结构图整理如下:<br /> </span> </div> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <p style="color:#4d4d4d;"> <img alt="modules" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3N0b3JlL25ld2JlZS1tYWxsLXMucG5n?x-oss-process=image/format,png" /> </p> </div> <p style="color:rgba(0,0,0,.75);"> <strong><span style="color:#e53333;">课程特色</span></strong> </p> <p style="color:rgba(0,0,0,.75);">   </p> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <ul> <li> 对新手开发者十分友好,无需复杂的操作步骤,仅需 2 秒就可以启动这个完整的商城项目 </li> <li> 最终的实战项目是一个企业级别的 Spring Boot 大型项目,对于各个阶段的 Java 开发者都是极佳的选择 </li> <li> 实践项目页面美观且实用,交互效果完美 </li> <li> 教程详细开发教程详细完整、文档资源齐全 </li> <li> 代码+讲解+演示网站全方位保证,向 Hello World 教程说拜拜 </li> <li> 技术栈新颖且知识点丰富,学习后可以提升大家对于知识的理解和掌握,可以进一步提升你的市场竞争力 </li> </ul> </div> <p style="color:rgba(0,0,0,.75);">   </p> <p style="color:rgba(0,0,0,.75);"> <span style="color:#e53333;">课程预览</span> </p> <p style="color:rgba(0,0,0,.75);">   </p> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <p style="color:#4d4d4d;"> 以下为商城项目的页面和功能展示,分别为: </p> </div> <div style="color:rgba(0,0,0,.75);"> <ul> <li> 商城首页 1<br /> <img alt="" src="https://img-bss.csdnimg.cn/202103050347585499.gif" /> </li> <li> 商城首页 2<br /> <img alt="" src="https://img-bss.csdn.net/202005181054413605.png" /> </li> <li>   </li> <li> 购物车<br /> <img alt="cart" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvY2FydC5wbmc?x-oss-process=image/format,png" /> </li> <li> 订单结算<br /> <img alt="settle" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3Qvc2V0dGxlLnBuZw?x-oss-process=image/format,png" /> </li> <li> 订单列表<br /> <img alt="orders" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3Qvb3JkZXJzLnBuZw?x-oss-process=image/format,png" /> </li> <li> 支付页面<br /> <img alt="" src="https://img-bss.csdn.net/201909280301493716.jpg" /> </li> <li> 后台管理系统登录页<br /> <img alt="login" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvbWFuYWdlLWxvZ2luLnBuZw?x-oss-process=image/format,png" /> </li> <li> 商品管理<br /> <img alt="goods" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvbWFuYWdlLWdvb2RzLnBuZw?x-oss-process=image/format,png" /> </li> <li> 商品编辑<br /> <img alt="" src="https://img-bss.csdnimg.cn/202103050348242799.png" /> </li> </ul> </div> </div> </div> </div>
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页