v-if 和 v-for 不能连用,否则会造成一个性能浪费!
原因: 在 Vue2中 v-for的优先级高于 v-if,如果v-if的值为false时,v-for仍然会根据优先级进行渲染,这样就造成了一个资源浪费,如下所示:
<template>
<div>
<!--不能同时使用,会造成资源浪费-->
<div v-for = "(it, i) in getData" v-key="i" v-if="flag">
</div>
</tempalte>
<script>
export default {
data(){
return{
getData:[1,2,3],
flag: false
}
}
}
</script>
可以将v-if包在最外层来解决:
<template>
<div>
<div v-if="flag">
<div v-for = "(it, i) in getData" v-key="i" ></div>
</div>
<!--如果不想使用div标签,也可以使用template-->
<template v-if="flag">
<div v-for = "(it, i) in getData" v-key="i" ></div>
</template>
</div>
</tempalte>
<script>
export default {
data(){
return{
getData:[1,2,3],
flag: false
}
}
}
</script>