列表循环
站长
· 阅读数 10
基础使用
循环对象和数组
const app = Vue.createApp({
data() {
return {
listArray: ['feng','wang','singer'],
listObject:{
firstName: 'feng',
lastName: 'wang',
job: 'singer'
}
}
},
template: `
<div>
<div v-for="(item,index) in listArray">{{item}} -- {{index}}</div>
<div v-for="(value,key,index) in listObject">{{value}} -- {{key}} -- {{index}}</div>
</div>
`
})
const vm = app.mount('#root')
：key 提升列表渲染的性能
如果往数组中新增数据，那么改变数据页面就会重新渲染。如果重新渲染的时候，把之前旧的DOM再重新渲染一次，比较损耗性能，新增内容后，只需要保留旧的DOM，更新新的DOM即可
vue为了提高性能，采取了尽量复用旧的DOM的策略，但是为了辅助vue知道哪些DOM该复用，哪些DOM不该复用，我们在使用v-for:指令的时候，给循环的每一项给一个唯一的key值，作为标记，vue更新DOM前会比较2次的key值，如果key值一样就去分析是否可以复用，如果可以复用就复用
const app = Vue.createApp({
data() {
return {
listArray: ['feng','wang','singer'],
}
},
methods:{
handleAddBtnClick() {
this.listArray.push('hello world')
}
},
template: `
<div>
<div v-for="(item,index) in listArray" :key="index">{{item}} -- {{index}}</div>
<button @click="handleAddBtnClick">新增</button>
</div>
`
})
const vm = app.mount('#root')
更新数组中数据
1. 使用数组的变更函数
- push
- pop
- shift
- unshift
- splice
- sot
- reverse
const app = Vue.createApp({
data() {
return {
listArray: ['feng','wang','singer'],
}
},
methods:{
handleAddBtnClick() {
// this.listArray.push('hello world')
// this.listArray.pop()
// this.listArray.shift()
this.listArray.unshift('hello')
}
},
template: `
<div>
<div v-for="(item,index) in listArray" :key="index">{{item}} -- {{index}}</div>
<button @click="handleAddBtnClick">新增</button>
</div>
`
})
const vm = app.mount('#root')
2. 直接替换数组
我们可以用全新的数组替换旧数组，或者使用数组的相关方法，利用其返回新数组的特点来更新数组
const app = Vue.createApp({
data() {
return {
listArray: ['feng','wang','singer'],
}
},
methods:{
handleAddBtnClick() {
// this.listArray = ['bye','world']
// this.listArray = ['bye','world'].concat(['666'])
this.listArray = ['bye','world'].filter(item => item === 'bye')
}
},
template: `
<div>
<div v-for="(item,index) in listArray" :key="index">{{item}} -- {{index}}</div>
<button @click="handleAddBtnClick">新增</button>
</div>
`
})
const vm = app.mount('#root')
3. 直接更新数组中的内容
const app = Vue.createApp({
data() {
return {
listArray: ['feng','wang','singer'],
}
},
methods:{
handleAddBtnClick() {
this.listArray[1] = 'li'
}
},
template: `
<div>
<div v-for="(item,index) in listArray" :key="index">{{item}} -- {{index}}</div>
<button @click="handleAddBtnClick">新增</button>
</div>
`
})
const vm = app.mount('#root')
更新对象中的数据
直接添加对象内容,这个功能是vue新版本才被允许的操作,旧版本的vue中直接往对象或者数组中添加内容是不被允许的
const app = Vue.createApp({
data() {
return {
listObject: {
firstName: 'feng',
lastName: 'wang',
job: 'singer'
}
}
},
methods: {
handleAddBtnClick() {
this.listObject.gender= '男'
this.listObject.age= 18
}
},
template: `
<div>
<div v-for="(value,key,index) in listObject" :key="index">{{value}} -- {{key}}</div>
<button @click="handleAddBtnClick">新增</button>
</div>
`
})
const vm = app.mount('#root')
v-for也可以循环数据
const app = Vue.createApp({
data() {
return {
listObject: {
firstName: 'feng',
lastName: 'wang',
job: 'singer'
}
}
},
methods: {
handleAddBtnClick() {
this.listObject.gender= '男'
this.listObject.age= 18
}
},
template: `
<div>
<div v-for="(value,key,index) in listObject" :key="index">{{value}} -- {{key}}</div>
<div v-for="item in 10" >{{item}}</div>
<button @click="handleAddBtnClick">新增</button>
</div>
`
})
const vm = app.mount('#root')
v-for 优先级 > v-if
如果不想展示listObject中的lastName属性该怎么办？
const app = Vue.createApp({
data() {
return {
listObject: {
firstName: 'feng',
lastName: 'wang',
job: 'singer'
}
}
},
template: `
<div>
<div
v-for="(value,key,index) in listObject"
:key="index"
v-if="key !== 'lastName'"
>
{{value}} -- {{key}}
</div>
</div>
`
})
const vm = app.mount('#root')
运行结果发现，v-if没有生效，为什么？
当既做v-for循环又做v-if循环的时候，v-for的优先级高于v-if，因此v-if不生效
那么应该怎么解决这个问题呢？
==> 把 v-if 和 v-for 摘开
const app = Vue.createApp({
data() {
return {
listObject: {
firstName: 'feng',
lastName: 'wang',
job: 'singer'
}
}
},
template: `
<div>
<div
v-for="(value,key,index) in listObject"
:key="index"
>
<div v-if="key !== 'lastName'">
{{value}} -- {{key}}
</div>
</div>
</div>
`
})
const vm = app.mount('#root')
我们发现v-if起作用了
但是我们这样就引入了非必要的div标签
const app = Vue.createApp({
data() {
return {
listObject: {
firstName: 'feng',
lastName: 'wang',
job: 'singer'
}
}
},
template: `
<div>
<div
v-for="(value,key,index) in listObject"
:key="index"
>
<div v-if="key !== 'lastName'">
{{value}} -- {{key}}
</div>
</div>
</div>
`
})
const vm = app.mount('#root')
template 占位符
const app = Vue.createApp({
data() {
return {
listObject: {
firstName: 'feng',
lastName: 'wang',
job: 'singer'
}
}
},
template: `
<div>
<template
v-for="(value,key,index) in listObject"
:key="index"
>
<div v-if="key !== 'lastName'">
{{value}} -- {{key}}
</div>
</template>
</div>
`
})
const vm = app.mount('#root')
