详解Vue列表渲染

php中世界最好的语言
发布: 2018-03-08 17:29:45
原创
2460人浏览过

这次给大家带来详解vue列表渲染,详解vue列表渲染的注意事项有哪些,下面就是实战案例,一起来看一下。

变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组。相比之下,也有非变异 (non-mutating method) 方法,例如:filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:

example1.items = example1.items.filter(function (item) {  return item.message.match(/Foo/)})
<div id="example">
  <div>
    <button @click="concat()">concat</button>
    <button @click="slice()">slice</button>
    <button @click="filter()">filter</button>
  </div>
  <ul>
    <li v-for="item in items">
      {{item.list}}
    </li>
  
  </ul>
</div>
<script>
  var example = new Vue({
    el:"#example",
    data:{
      items:[
        {list:5},
        {list:6},
        {list:7}
      
      ],
      addValue:{list:10}
    },
    methods:{
      concat(){
     this.items= this.items.concat(this.addValue)
      },
      slice(){
      this.items = this.items.slice(1)
      },
      filter(){
      this.items = this.items.filter(function(item,index,arr) {
          return (index > 0)
        })
      }
    
    }
  })
登录后复制

以上操作并不会导致Vue丢弃现有DOM并重新渲染整个列表。Vue实现了一些智能启发式方法来最大化DOM元素重用,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作

注意事项

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

立即学习前端免费学习笔记(深入)”;

当你利用索引直接设置一个项时,例如:

vm.items[indexOfItem] = newValue
登录后复制

当你修改数组的长度时,例如:

vm.items.length = newLength
登录后复制

为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新

爱图表
爱图表

AI驱动的智能化图表创作平台

爱图表 99
查看详情 爱图表
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)
登录后复制

为了解决第二类问题,你可以使用 splice:

example1.items.splice(newLength)
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

在HTML中如何用<a>标签编写个人收藏夹

HTML用img标签做图

HTML里的常见问题一

以上就是详解Vue列表渲染的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号