小白学 VUE 系列vue v-for与v-if一同使用性能优化技巧

vue v-for与 v -if一同使用性能优化技巧

当 v -for与 v -if一起使用时,v-for的优先级比 v -if更高,这意味着 v -if将分别重复运行于每个 v -for循环中。如果渲染一个列表时,需要按照条件来渲染,那么就需要 v -for与 v -if一起使用了。
Vue官方不建议 v -if和 v -for同时用在同一个元素上,因为一起使用的话,每一个元素都会添加一个 v -if,重复运行于每一个 v -for循环中,会造成性能的浪费。建议使用 computed 计算属性解决这个问题。

<div id="app">
   <h3 v-if="showMessage">{{ message}}</h3>
    <ul>
        <li v-for="(item,key,index) in newItems" :key="item.id">
            {{ item.id }}-----{{ item.name }}
        </li>
    </ul>
</div>
<script>

   new Vue({
       data(){
           return {
               message:"你好",
               showMessage:false,
               items:[
                   {
                       id:1,
                       name:"Markdown基本语法1:标题及字体",
                       show:true
                   },
                   {
                       id:2,
                       name:"Typora 标题自动编号生成",
                       show:false
                   },
                   {
                       id:3,
                       name:"typora语法教程",
                       show:true
                   }
               ]
           }
       },
       computed:{
           newItems(){
               return this.items.filter((item)=>{
                   return item.show;
               })
           }
       }
   }).$mount("#app")
</script>

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。
黑白课堂

黑白课堂 · 技术专家

专业PHP开发

年度VIP 站长创业者玉树凌风每天醒来0收入
查看更多

最新视频课程

钻级赞助商