7、列表循环渲染
使用v-for渲染数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!",
list: ["大哥刘备", "二哥关羽", "三哥张飞", "四哥赵云"]
}
},
// 这里可以用 item in list 也可以用 item of list
template: `
<div v-for='(item, index) in list'>
{{ item }} -- {{ index }}
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612200822736.png
使用v-for渲染对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!",
object: {
one: "大哥刘备",
two: "二哥关羽",
three: "三哥张飞",
four: "四哥赵云"
}
}
},
// 这里可以用 item in list 也可以用 item of list
template: `
<div v-for='(value, key, index) in object'>
{{ key }} -- {{ value }} -- {{ index }}
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612201355510.png
使用key优化性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!",
list: [1, 2, 3, 4]
}
},
methods: {
addItem(){
this.list.push(1000);
}
},
// 这里可以用 item in list 也可以用 item of list
// 我们在添加新的元素的时候，vue 会智能决定渲染（创建）的内容
// 没有改变的内容不渲染，复用原来的，新增加的内容就渲染
// 但是，并非所有的时候 vue 都能准确判断一个元素是否是新的
// 我们需要使用 :key 来绑定一个“唯一”的值，来帮助 vue 判断
// 如果有相同的值就复用之前的 DOM 反之创建新的
// 这个 key 一般不用 index ，因为每个元素对应的 index 都不一样
// 就导致用了等于没用（这点比较偏向 vue 的底层）
template: `
<div v-for='(item, index) in list' :key="item">
{{ item }} -- {{ index }}
</div>
<button @click="addItem">addItem</button>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612202721696.png
控制数组
此外，我们可以通过控制数组来控制列表的渲染，这里就暂且省略了；
给对象添加属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!",
object: {
one: "大哥刘备",
two: "二哥关羽",
three: "三哥张飞",
four: "四哥赵云"
}
}
},
methods: {
addAttrs(){
this.object.five = "柏拉图";
this.object.six = "苏格拉底";
this.object.seven = "亚里士多德";
}
},
// 这里可以用 item in list 也可以用 item of list
template: `
<div v-for='(value, key, index) in object'>
{{ key }} -- {{ value }} -- {{ index }}
</div>
<button @click="addAttrs">add</button>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612205508685.png
循环n次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
},
// 这里可以用 item in list 也可以用 item of list
template: `
<div v-for='item in 10'>
{{message}}
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612205724722.png
指定某元素不显示
可灵活运用，但是不要将 v-for 和 v-if 下载一个标签里，v-for 的权限更高！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
},
// 这里可以用 item in list 也可以用 item of list
template: `
<div v-for='item in 10'>
<div v-if="item!=8">{{item}}</div>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612210125000.png
存在问题
image-20210612210331252.png
解决问题：使用template
使用 template 代替 div ， template 只是一个占位符！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
},
// 这里可以用 item in list 也可以用 item of list
template: `
<template v-for='item in 10'>
<div v-if="item!=8">{{item}}</div>
</template>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612210548947.png
网友评论