循环遍历
<template>
<view class="content">
<view class="box2" hover-class="box2-active" >
<view class="box" hover-class="box-active" hover-stop-propagation>
this is a box
</view>
</view>
<view class="box" hover-class="box-active">
this is a box
</view>
<view class="">
this is a box1
</view>
<button type="default">按钮</button>
<button type="primary" disabled="">按钮</button>
<button type="warn" loading=""></button>
<image src="https://img0.baidu.com/it/u=2636535523,1482743544&fm=26&fmt=auto" mode="aspectFill"></image>
<image src="https://img0.baidu.com/it/u=2636535523,1482743544&fm=26&fmt=auto" mode="aspectFit"></image>
<view v-for="(item,index) in arr" :key='item.id'>
序号:{{item.id}},名字:{{item.name}},年龄:{{item.age}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
arr:[
{
name:'name1',
age:'18',
id:1
},
{
name:'name2',
age:'22',
id:2
},
{
name:'name3',
age:'17',
id:3
}
]
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.box{
height: 100rpx;
width: 100rpx;
background: #0000FF;
}
.box-active{
background:#ff5500;
}
.box2{
height: 200rpx;
width: 200rpx;
background-color: red;
}
.box2-active{
background-color: blue;
}
</style>
<template>
<view>
<view v-for="(item, index) in items"> **********************
{{ index }} - {{ item.message }}
</view>
</view>
</template>
在做循环的时候首先要有一个数组,是一个json,array,想要对studentArray里面的数据渲染的时候就要从
这个
之后定义要循环的每一项元素,元素名称叫stuObj
,是一个对象,stuObj in studentArray
这是单个数组进行的循环
<template>
<view v-for="stuObj in studentArray"> **********************
<view>姓名:{{stuObj.name}},年龄:{{stuObj.age}}</view>
</view>
</template>
<script>
export default {
data() {
return {
studentArray:[
{
name:"jack",
age:19
},
{
name:"jon",
age:22
},
{
name:"jason",
age:21
},
{
name:"lucy",
age:18
},
{
name:"stark",
age:16
}
]
}
},
methods: {
}
}
</script>
<style>
</style>
嵌套循环
它是一个双重循环
第二个循环体在第一个循环体内嵌套
代表我们在循环的时候,它并不会在页面里面把标签输出
它仅仅是把元素进行循环
<template>
<view v-for="stuObj in studentArray">
<view>姓名:{{stuObj.name}},年龄:{{stuObj.age}}</view>
<view>
<!-- <view v-for="sk in stuObj.skill">
{{sk}},
</view> -->
<block v-for="sk in stuObj.skill">
{{sk}},
</block>
</view>
</view>
</template>
<script>
export default {
data() {
return {
studentArray:[
{
name:"jack",
age:19,
skill:["Java","HTML","css"]
},
{
name:"jon",
age:22,
skill:["Java","css","vue"]
},
{
name:"jason",
age:21,
skill:["HTML","springcloud","vue"]
},
{
name:"lucy",
age:18,
skill:["Java","HTML","springcloud"]
},
{
name:"stark",
age:16,
skill:["HTML","css","vue"]
}
]
}
},
methods: {
}
}
</script>
<style>
</style>
当 Vue 正在更新使用 v-for
渲染的元素列表时,它默认使用“就地更新”的策略
如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input
中的输入内容,switch
的选中状态),需要使用 :key
来指定列表中项目的唯一的标识符
:key
的值以两种形式提供
- 使用
v-for
循环array
中item
的某个property
,该property
的值需要是列表中唯一的字符串或数字,且不能动态改变 - 使用
v-for
循环中item
本身,这时需要item
本身是一个唯一的字符串或者数字
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率
如不提供 :key,会报一个
warning
, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
示例:
<template>
<view>
<!-- array 中 item 的某个 property -->
<view v-for="(item,index) in objectArray" :key="item.id"> **********************
{{index +':'+ item.name}}
</view>
<!-- item 本身是一个唯一的字符串或者数字时,可以使用 item 本身 -->
<view v-for="(item,index) in stringArray" :key="item">
{{index +':'+ item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
objectArray:[{
id:0,
name:'li ming'
},{
id:1,
name:'wang peng'
}],
stringArray:['a','b','c']
}
}
}
</script>
嵌套列表渲染,必须指定不同的索引!
<template>
<scroll-view v-for="(card,index) in list" :key="index">
<view v-for="(item,itemIndex) in card" key="itemIndex">
({item.value})
</view>
</scroll-view>
</template>
在这种嵌套循环的时候,index和itemIndex这种索引必须指定,且别名不能相同
2行,index是默认,不写的话也会默认加上,这个是在编译的时候进行的
3行,itemIndex,这样两个index在循环的时候他们的下标就不会有冲突
任何语言开发都一样,在做嵌套循环的时候,下标必须要定义为不同的
2行,8行,(stuObj,stuIndex)
和(sk,itemIndex)
在循环的时候,stuObj和sk
代表对象,stuIndex和itemIndex
代表下标
<template>
<view v-for="(stuObj,stuIndex) in studentArray">
<view>姓名:{{stuObj.name}},年龄:{{stuObj.age}}</view>
<view>
<!-- <view v-for="sk in stuObj.skill">
{{sk}},
</view> -->
<block v-for="(sk,itemIndex) in stuObj.skill">
{{sk}},
</block>
</view>
</view>
</template>
<script>
export default {
data() {
return {
studentArray:[
{
name:"jack",
age:19,
skill:["Java","HTML","css"]
},
{
name:"jon",
age:22,
skill:["Java","css","vue"]
},
{
name:"jason",
age:21,
skill:["HTML","springcloud","vue"]
},
{
name:"lucy",
age:18,
skill:["Java","HTML","springcloud"]
},
{
name:"stark",
age:16,
skill:["HTML","css","vue"]
}
]
}
},
methods: {
}
}
</script>
<style>
</style>
写了**:key**
之后能够保证循环的时候每一行的元素,每一行的元素如果包含了相应的组件的话,这个组件会和我们循环的值进行一个绑定,是保证我们在当前页面的全局唯一性,简而言之就是循环每一项保证唯一
示例
16行,为学生增加编号,保证学生的唯一性,加入ID,这个ID就是和key做绑定的,然后要在view中做渲染,
38行,通过this.studentArray
来获得data里面的数据,this代表当前页面里整体的对象
45行,所有JS里面只要有数组就有方法,push,它是向数组尾部一个个添加新的项
46行,unshift
是向数组首部添加项
3行,用:key
保证组件和属性数据捆绑在一起
<template>
<view>
<view v-for="stu in studentArray" :key="stu.id"> //:key保证组件和数据捆绑唯一
<checkbox :value="stu.name"></checkbox>
</view>
<button type="primary" @click="addStu">新增学生</button>
</view>
</template>
<script>
export default {
data() {
return {
studentArray:[
{
id:1,
name:"jack",
age:19,
skill:["Java","HTML","css"]
},
{
id:2,
name:"jon",
age:22,
skill:["Java","css","vue"]
},
{
id:3,
name:"jason",
age:21,
skill:["HTML","springcloud","vue"]
},
]
}
},
methods: {
addStu(){
var studentArray = this.studentArray;
var newId = studentArray.length + 1;
var newStu = {
id:newId,
name:"新生" + newId,
age:18
}
studentArray.push(newStu);
studentArray.unshift(newStu);
}
}
}
</script>
<style>
</style>
注意事项
- 在H5平台 使用 v-for 循环整数时和其他平台存在差异,如
v-for="(item, index) in 10"
中,在H5平台 item 从 1 开始,其他平台 item 从 0 开始,可使用第二个参数 index 来保持一致。 - 在非H5平台 循环对象时不支持第三个参数,如
v-for="(value, name, index) in object"
中,index 参数是不支持的。 - 小程序端数据为差量更新方式,由于小程序不支持删除对象属性,使用的设置值为 null 的方式替代,导致遍历时可能出现不符合预期的情况,需要自行过滤一下值为 null 的数据(相关反馈)。
在组件上使用 v-for
在自定义组件上,你可以像在任何普通元素上一样使用 v-for
<my-component v-for="item in items" :key="item.id"></my-component>
当在组件上使用 v-for 时,key是必须的