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>

相关文章
|
2月前
|
机器学习/深度学习 自然语言处理 API
10-22|处理脏话其他方法
10-22|处理脏话其他方法
|
5月前
|
存储 缓存 Java
createTempFile方法详解
createTempFile方法详解
|
Java 开发者
|
机器学习/深度学习
基于2D标靶的摄像机标定方法
基于2D标靶的摄像机标定方法
|
Python 容器
强大的 accessor 方法
强大的 accessor 方法
|
存储 算法 搜索推荐
常用的外部排序方法
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34173549/article/details/81158566 定义问题       外部排序指的是大文件的排序,即待排序的记录存储在外存储器上,待排序的文件无法一次装入内存,需要在内存和外部存储器之间进行多次数据交换,以达到排序整个文件的目的。
1824 0
|
测试技术 C#
分享几个实用的方法
  今天主要和大家分享的是本人总结的分页执行方法,也可以说就是分批执行;该篇采用java8新增的表达式来操作,希望能给各位带来好的帮助和在日常工作中提供便利;同样的操作流程和逻辑之前用C#代码写过一次,有需要的朋友可以看以前的博文; 分页方式拆分List为多个子集List方法 执行统一方法-无...
1208 0
|
Android开发
两个方法搞定透明状态栏
两个方法搞定透明状态栏
1471 0