zoukankan      html  css  js  c++  java
  • 十一、列表渲染v-for与v-if一同使用性能优化技巧

    1、当 v-for 与 v-if 一起使用时,v-for 的优先级比 v-if 更高。这意味着 v-if 分别重复运行每个 v-for 循环中。

          如果渲染一个列表时,需要按照条件来渲染,那么需要v-for与v-if一起使用了。

    2、Vue官方不建议v-if和v-for同时用在一个元素上,因为一起使用的话,每一个元素都会添加一个v-if,

           重复运行于每一个v-for循环中,会造成性能的浪费

    3、建议使用computed计算属性来解决这个(按照条件来渲染列表)问题。

    <template>
         <div v-for='(item,index) in newItems' :key='index'><!--3、使用computed计算属性,直接返回筛选过滤后的结果,把结果数据直接当列表数据源使用-->
              {{item.title}}
         </div>
    </template>
    <script>
        let data={
            items:[
                {title:'羊肉串',isShow:true},
                {title:'猪肉串',isShow:false},
                {title:'牛肉串',isShow:true},
                {title:'馒头片',isShow:true},
                {title:'面包片',isShow:false}
            ]
        };
    computed:{
    //3、建议使用computed计算属性来解决这个(按照条件来渲染列表)问题。 newItems(){ //其实使用了computed计算属性的getter return this.items.filter((item)=>{ return item.isShow==true; }); } } </script>

     

  • 相关阅读:
    闭包
    iframe
    函数声明和函数表达式
    简单的事件委托
    onhashchange
    WebP探索
    Chrome
    适合自己学习的一些网站
    模拟jQuery的一些功能
    __autoload()方法
  • 原文地址:https://www.cnblogs.com/Strugglinggirl/p/15235873.html
Copyright © 2011-2022 走看看