v-for的四种方法

简介: v-for的四种使用方法分别是:1.使用v-for循环一个简单的数组2.使用v-for循环一个复杂的数组3.使用v-for循环对象4.v-for循环一个迭代的数字

v-for的四种使用方法分别是:

1.使用v-for循环一个简单的数组

2.使用v-for循环一个复杂的数组

3.使用v-for循环对象

4.v-for循环一个迭代的数字

<div id="app">
            <!--v-for循环一个简单的数组-->
           <p v-for="item in list">{{item}}</p>
           <P v-for="(item ,i) in list">索引值:{{i}}---每一项:{{item}}</P>
           <!--v-for循环一个复杂的数组-->
           <p v-for="(item,i) in list1">索引值:{{i}}--id:{{item.userid}}---姓名:{{item.username}}</p>
           <!--v-for循环一个对象-->
           <p v-for="(val,key,i) in list2">id:{{val}},name:{{key}},index:{{i}}</p>
           <!--v-for 循环一个迭代数字-->
           <p v-for="count in 10">这是第{{count}}次循环</p>

v-for中key的使用注意项

v-for在循环时,key属性只能使用number获取string

key在使用时只能使用v-bind的属性绑定的形式,指定key的值

在组件中使用v-for的时候,或者在一些特殊的时候v-for使用有问题的时候

必须在使用v-for的同时指定唯一的字符或者number类型:key值

 <div>
               <label>
                   id:<input type="text" v-model="id" >
               </label>
               <label>
                    name:<input type="text" v-model="name" >
                </label>
                <input type="button" value="提交" @click="add">
           </div>
           <p v-for="item in list3" :key="item">
            <input type="checkbox"> 
            {{item.id}}------
            {{item.name}}
          </p>
        </div>
    <div id="app1">
        <p v-for="(val,key,i) in user ">userid:{{val}}---username:{{key}}---index:{{i}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                list:[1,2,3,4,5,6,7,8],
                list1:[
                    { userid:1,username:'zs1'},
                    { userid:2,username:'zs2'},
                    { userid:3,username:'zs3'},
                    { userid:4,username:'zs4'}
                ],
                list2:{
                    id:1232,
                    name:'托尼.琼斯',
                    gender:'female'
                },
                list3:[
                    {id:1,name:'项羽'},
                    {id:2,name:'刘备'},
                    {id:3,name:'诸葛亮'},
                    {id:4,name:'曹操'},
                    {id:5,name:'赵子龙'},
                ]
         },
            methods:{
                add(){
                   // this.list3.push({id:this.id,name:this.name});
                   this.list3.unshift({id:this.id,name:this.name});   
                }
            }
        });  
    </script>

相关文章
|
8天前
|
敏捷开发 安全 Java
论软件维护方法及其应用
【11月更文挑战第16天】在软件开发的整个生命周期中,软件维护阶段占据了超过60%的时间。本文旨在深入探讨软件维护方法及其应用,通过笔者参与的一个实际Java项目为例,详细阐述软件维护的重要性、影响因素以及具体实践。
14 1
|
6月前
|
算法 数据安全/隐私保护
常用的有限元网格生成方法
本文介绍了三种常见的有限元网格生成方法:映射法、四(八)叉树法和Delaunay三角化法。映射法通过坐标变换将物理域映射到规则参数域,适合生成结构化和非结构化网格,但处理复杂区域时较困难。四(八)叉树法基于栅格,通过递归细分逼近边界,适用于非结构化网格,但内部和边界网格的相容剖分较复杂。Delaunay三角化法通过保证外接圆特性生成高质量网格,适用于凸区域,但在凹区域需进行边界恢复。前沿推进法则从边界开始逐步向内生成网格,边界质量好,但数据结构设计和推进规则制定有一定挑战。这些方法各有优缺点,常结合使用以优化网格剖分。
658 1
|
SQL 数据库
SqlCommand.ExecuteNonQuery 方法
SqlCommand的一个类,用于包含update、insert、delete、select的Transact-sql 语句中来修改数据库中的数据,并返回结果。
C#中的方法
C#中的方法
86 0
|
JavaScript 前端开发
getMonth() 方法
getMonth() 方法
176 0
|
C语言 C++
求公因数的方法(C/C++)
求公因数的方法(C/C++)
318 0
求公因数的方法(C/C++)
|
存储 JavaScript 前端开发
JavaScript继承的几种方法
JavaScript继承的几种方法
136 0
JavaScript继承的几种方法
|
机器学习/深度学习
基于2D标靶的摄像机标定方法
基于2D标靶的摄像机标定方法
|
移动开发 JavaScript 前端开发