官方文档中的例子只是给了代码的一部分,经过自己的摸索,差不多写出一个可以更好解释这个问题的需求,下面的源码(用vscode编写):
需求: 有一个数组,存有多个对象,每个对象都有一个属性 isName: true 或者 isName: false。现在要遍历每个数组,实现isName: true 时,显示这个名字,isName: false 时不显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
// 这是第一种方法,直接把v-if和v-for直接写到一个标签中
<!-- <li v-for="(user,index) in users" v-if="user.isName" :key="index"> -->
// 第二种就是为了避免v-if和v-for同时使用,用到的方法,通过计算属性来实现
<li v-for="(user,index) in activeUsers" :key="index">
{{ user.name }}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
users: [{
name: '张三',
isName: true,
},
{
name: '李四',
isName: true,
},
{
name: '王五',
isName: false,
},
{
name: '赵六',
isName: true,
},
{
name: '唐七',
isName: false,
},
]
},
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isName
})
}
}
})
</script>
</body>
</html>
第一种方法: 直接 v-if 和 v-for 同时使用,但是在vue中会优先执行v-for, 当v-for把所有内容全部遍历之后 , v-if再对已经遍历的元素进行删除 , 造成了加载的浪费 。
第二种方法: 使用计算属性将有 isName: false 属性的名字先过滤掉,再通过 v-for 显示在页面上。
例如,在一个Array
中,删掉偶数,只保留奇数,可以这么写:
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
官方文档解释: https://cn.vuejs.org/v2/style-guide/#避免-v-if-和-v-for-用在一起-必要