一,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标签为占位符,不展示在页面中