v-for和v-if
课堂演讲
·
v-for和v-if的同时使用时的注意事项
不同点
v-for
是条件渲染,v-if
是列表渲染;
在同一个标签上,使用这两个关键指令时,由于v-for
的优先级高于v-if
,在v-for
没次迭代时,也会执行一次v-if
,这样耗费更多的计算开销,而影响计算机性能;
特别是对于渲染的范围很小时,便会出现“大材小用”的现象,最好是在数据模型中对列表进行过滤,减少视图的判断。
案例:(注:html文件和vue.js文件处于同级)
<!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="./vue.js"></script>
</head>
<body>
<div id="demo">
<p v-for="item in list" v-bind:key="item.id" v-if="item.id < 3">
{{item.name}}
</p>
</div>
<script>
let demo = new Vue({
el: '#demo',
data : {
name: '',
list :[
{ id: 1, name: 'HTML' },
{ id: 2, name: 'CSS' },
{ id: 3, name: 'JavaScript' },
{ id: 4, name: 'Vue' }
]
}
</script>
</body>
</html>
运行结果:
这里同时使用了v-for
和v-if
,虽然得到了结果,如果list
有大量的数据,而满足条件的确实少数,就会导致还是要遍历整个数组,在性能上也是极度的浪费。
以下提供解决方法,便是开头描述的计算属性,不可以用methods
(方法),mehtods
是处理点击事件,需要用户交互,不能自动触发,而computed
(计算属性)是直接给界面更新值。
优化后:
<!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="./vue.js"></script>
</head>
<body>
<div id="demo">
<p v-for="item in filteredList" v-bind:key="item.id">
{{item.name}}
</p>
</div>
<script>
let demo = new Vue({
el: '#demo',
data : {
list :[
{ id: 1, name: 'HTML' },
{ id: 2, name: 'CSS' },
{ id: 3, name: 'JavaScript' },
{ id: 4, name: 'Vue' }
]
},
computed: {
filteredList() {
return this.list.filter(function (item) {
return item.id < 3
})
}
}
})
</script>
</body>
</html>
运行结果:
和前者运行一样,但在性能上有很大差别,此处数据量较小,效果不明显。
如果要同时使用v-if
和v-for
就不要以同级的形式。
实际案例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<div v-if="products.length == 0" >没有找到商品!</div>
<div v-else>
<p v-for="item in product" :key="item.name">
名称:{{item.name}}
价格:{{item.price}}
</p>
</div>
</div>
<script>
let dem = new Vue({
el: '#demo',
data : {
products :[
{ name: '手机', price: 3000},
{ name: '电脑', price: 7000},
{ name: '平板', price: 6500},
{ name: '电视', price: 8000}
]
},
computed: {
product() {
return this.products.filter(function (item) {
return item.name,item.price
})
}
}
})
</script>
</body>
</html>
运行结果:
可以自行尝试把数组设为空值,则会触发<div v-if="products.length == 0" >没有找到商品!</div>
,只打印其中的文本。
更多推荐
已为社区贡献1条内容
所有评论(0)