一，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');
image.png
二，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');
image.png
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');
image.png
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');
image.png
三，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循环可直接循环数字：
示例如下：
image.png
image.png
六，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标签为占位符，不展示在页面中
image.png
src=http___p0.ssl.qhimgs4.com_t01d7887d898734a0a2.gif&refer=http___p0.ssl.qhimgs4.gif
