列表渲染
Vue中的列表渲染使用v-for标签,注意渲染效率优化需要绑定:key
效果
代码
注意:数组变更操作,常见如添加,删除,反转,替换,更新操作;对象变更操作,如添加属性
v-for和v-if即在循环中过滤需要在不同DOM节点中使用;:key可以优化v-for的渲染效率
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lesson 11</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['dell', 'lee', 'teacher'],
listObject: {
firstName: 'dell',
lastName: 'lee',
job: 'teacher'
}
}
},
methods: {
handleAddBtnClick() {
// 1. 使用数组的变更函数 push, pop, shift, unshift, splice, sort, reverse
// this.listArray.push('hello');
// this.listArray.pop();
// this.listArray.shift();
// this.listArray.unshift('hello');
// this.listArray.reverse();
// 2. 直接替换数组
// this.listArray = ['bye', 'world']
// this.listArray = ['bye', 'wolrd'].filter(item => item === 'bye');
// 3. 直接更新数组的内容
// this.listArray[1] = 'hello'
// 直接添加对象的内容,也可以自动的展示出来
// this.listObject.age = 100;
// this.listObject.sex = 'male';
}
},
template: `
<div>
<template
v-for="(value, key, index) in listObject"
:key="index"
>
<div v-if="key !== 'lastName'">
{{value}} -- {{key}}
</div>
</template>
<div v-for="item in 10">{{item}}</div>
<button @click="handleAddBtnClick">新增</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>