美文网首页
vue 模板循环放入方法,造成的性能问题

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

作者: 大号火龙果 | 来源:发表于2020-03-14 16:22 被阅读0次

例子:


          <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定义一个变量然后通过这个变量去访问到地址字符串,但是,问题就在这,因为他是一个循环,所以如果循环里放上一个方法利用传参去拼接参数的话就会在这个方法里走上数组长度的平方次,这将极大的消耗内存以及性能,所以,在模板里利用方法传参计算 的还是要慎重!!!

相关文章

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/pxgwshtx.html