列表渲染
1.用v-for把一个数组对应为一组元素
可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in items">
{{item.message}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
items: [
{message: 'Foo'},
{message: 'Bar'},
]
},
});
</script>
<style type="text/css">
</style>
</body>
</html>
2.在v-for块中，可以访问所有父作用域的property。v-for还支持一个可选的第二个参数，即当前项的索引。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item,index in items">
{{parentMessage}} {{index}} : {{item.message}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
parentMessage: 'Parent',
items: [
{message: 'Foo'},
{message: 'Bar'},
]
},
});
</script>
<style type="text/css">
</style>
</body>
</html>
3.在v-for里使用对象
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="value in object">
{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
object: {
title: 'how to do lists in vue',
author: 'jane doe',
publishedAt: "2020-09-20",
}
},
});
</script>
<style type="text/css">
</style>
</body>
</html>
4.提供第二个参数为property名称(也就是键名),第三个参数作为索引。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value,name,index) in object">
{{index}} - {{name}} - {{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
object: {
title: 'how to do lists in vue',
author: 'jane doe',
publishedAt: "2020-09-20",
}
},
});
</script>
<style type="text/css">
</style>
</body>
</html>
5.维护状态
当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态的列表渲染输出。
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key attribute。
建议尽可能在使用v-for时提供key attribute，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
因为它是Vue识别节点的一个通用机制，key并不仅与v-for特别关联。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value,name,index) in object" :key="index">
{{index}} - {{name}} - {{value}}
</li>
</ul>
<ul>
<li v-for="item,index in items" :key="index">
{{item.message}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
object: {
title: 'how to do lists in vue',
author: 'jane doe',
publishedAt: "2020-09-20",
},
items: [
{message: 'Foo'},
{message: 'Bar'},
]
},
});
</script>
<style type="text/css">
</style>
</body>
</html>
6.数组检测更新
(1).变更方法
Vue将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：push() pop() shift() unshift() splice() sort() reverse()
(2).替换数组
变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item,index in items" :key="index">
{{item.message}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
items: [
{message: 'Foo'},
{message: 'Bar'},
]
},
});
vm.items = vm.items.filter(function (item) {
return item.message.match(/Foo/);
})
</script>
<style type="text/css">
</style>
</body>
</html>
7.显示过滤或排序后的结果
想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="n in evenNumbers">
{{n}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
numbers: [1, 2, 3, 4, 5]
},
computed: {
evenNumbers: function fn() {
return this.numbers.filter(function (number) {
return number % 2 === 0;
})
}
}
})
</script>
<style type="text/css">
</style>
</body>
</html>
在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个方法：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul v-for="set in sets">
<li v-for="n in even(set)">
{{n}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
sets: [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]]
},
methods: {
even: function (numbers) {
return numbers.filter(function (num) {
return num % 2 === 0;
})
}
}
})
</script>
<style type="text/css">
</style>
</body>
</html>
