本篇讲列表渲染, 主要是对 v-on 指令配合 v-if 和一些数组相关的方法来体验 vue 的模板渲染方法.
数组元素的渲染
<!DOCTYPE html>
<html lang="en">
<head>
<title>列表渲染</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
listArray: ['hello', 'world', 'youge', 'cool']
}
},
template: `
<div
v-for="(item, index) in listArray"
:key="index
>
{{item}}--{{index}}</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
主要还是对 v-on 的使用罢了.
hello--0
world--1
youge--2
cool--3
对象元素的渲染
<!DOCTYPE html>
<html lang="en">
<head>
<title>列表对象渲染</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
listObject: {
firstName: 'you',
lastName: 'ge',
job: 'marketing'
}
}
},
template: `
<div
v-for="(value, key, index) in listObject"
:key="index"
>
{{value}}--{{key}}--{{index}}
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
you--firstName--0
ge--lastName--1
marketing--job--2
结合数组 & 对象 方法来演示
就纯复习一下数组, 对象的一些增删改查的基本方法而已.
<!DOCTYPE html>
<html lang="en">
<head>
<title>综合案例</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
listArray: ['hello', 'world', 'youge', 'cool'],
listObject: {
firstName: 'dell',
lastName: 'lee',
job: 'teacher'
}
}
},
methods: {
addItemClick () {
// 1. 数组变更函数: push, pop, shift, unshift, splice...
// this.listArray.push('cj')
// this.listArray.pop();
// this.listArray.shift();
// this.listArray.unshift('cj');
// this.listArray.splice(1, 2);
// this.listArray.sort();
// this.listArray.reverse();
// 2. 直接替换数组(函数式编程)
// this.listArray = ['aa', 'bb', '中国'];
// this.listArray = ['bye', 'world'].filter(item => item == 'bye');
//3. 直接更新数组内容
// this.listArray[1] = 'youge';
// 对象: 新增
this.listObject['age'] = 18;
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 5">{{item}}</div>
<button @click="addItemClick">新增</button>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
列表渲染这个在实际应用中应该是最高频的了, 尤其是对后端数据进行渲染就必然会用到这个 v-for 相关的啦.
标签：const,渲染,--,app,listArray,列表,数组,vue3 From： https://www.cnblogs.com/chenjieyouge/p/16634442.html