有时，我们想要显示一个经过过滤或排序后的数组，而不实际变更或重置原始数组的数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。例如：
<html>
<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>Vue</title>
<!-- 使用 CDN 引入 Vue 库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="n in evenNumbers">{{ n }}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
// 计算属性
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
});
</script>
</body>
</html>运行效果图：
在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个方法，例如：
<html>
<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>Vue</title>
<!-- 使用 CDN 引入 Vue 库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></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 app = new Vue({
el: "#app",
data: {
sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
});
</script>
</body>
</html>运行效果图：
川公网安备51010802032098
