vue 模板循环放入方法,造成的性能问题

例子:


          <li
            v-for="(item,index) in dataList"
            :key="index"
            @click="back(item.address_id,item.name,item.phone,item.province.district_name+item.city.district_name+item.area.district_name+item.address)"
          >
            <h3 class="clear">
              <p class="inline_block">{{item.name}}</p>
              <h4
                class="inline_block pull_right"
              >{{item.phone.substr(0,3)+"-"+item.phone.substr(3,4)+'-'+item.phone.substr(7,4)}}</h4>
              <h5>{{item.province.district_name+item.city.district_name+item.area.district_name+item.address}}</h5>
            </h3>
            <div class="clear">
              <h1 class="inline_block" v-if="item.is_default">
                <h4 class="aa inline_block active"></h4>
                <span>默认</span>
              </h1>
              <h2 class="inline_block pull_right">
                <h3 class="inline_block" @click="deleteItem(item)">删除</h3>
                <h4 class="inline_block" @click="editer(uid,item.address_id)">编辑</h4>
              </h2>
            </div>
          </li>
        

大家看 代码中的h5标签,因为是一个地址的拼接,但是在因为我想着后来要用到这个地址的字符串,所以就想把他放在方法里,然后在data定义一个变量然后通过这个变量去访问到地址字符串,但是,问题就在这,因为他是一个循环,所以如果循环里放上一个方法利用传参去拼接参数的话就会在这个方法里走上数组长度的平方次,这将极大的消耗内存以及性能,所以,在模板里利用方法传参计算 的还是要慎重!!!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 因为对狗知道的很少,不叫狗说就叫说狗,要不然名字光亮,也能显出水准;加上我本人从来没动手养过一只狗很难知其脾性...
    西门杨晓羊阅读 2,817评论 0 2
  • 本文参加【世界华语悬疑文学大赛】征稿活动,本人承诺,文章内容为原创。 -1- 敲下最后一个字,终于把小说完成了,蓝...
    李晓木阅读 4,748评论 17 17
  • 自我介绍
    古灵精怪的果宝阅读 1,859评论 0 0
  • 2017年11月11日,如是家人谭红霞,种种子第103天。 发心:我今不是为了我个人而闻思修,而是为了六道轮回一切...
    心雅701阅读 1,540评论 2 1

友情链接更多精彩内容