时间:2021-05-25
介绍
用 v-for 把一个数组对应为页面上的一组元素
vue.js 使用的是 v-for 指令来处理组件元素的循环迭代逻辑。通常它会和 v-if 配合使用,达到我们所需要的处理逻辑。
v-for 的语法形式是 item in items,其中 items 就是我们要循环的数组,而 item 则是被迭代的数组元素的别名。
我们都知道既然有循环那肯定少不了对索引的处理。v-for 指令给我们提供了可选的第二个参数,即当前项的索引。
index 就是那个当前索引了。
你也可以使用 of 替代 in 作为分隔符。
在 v-for 里使用对象
是哒,很明显 v-for 也可以用来遍历一个对象的属性。
也可以提供第二个参数为 property 名称 (也就是键名)
还可以用第三个参数作为索引
维护状态
敲黑板啦哈~
vuejs 为了维护循环列表的状态需要提供唯一的 key 属性。
这个唯一的 key 可以为我们提供列表元素状态的更新,避免重复渲染等优化页面的性能。
这个 key 很关键,并不推荐使用简单的索引作为 key 的值,因为会有造成重复渲染混乱的可能。
数组更新检测
咳咳~ 继续敲黑板
我们在写程序的时候,往往会有数据更新但是页面元素没有跟着对应变化的情况。
数组列表的更新检测 vue 为我们提供了一套解决方案,但是需要注意它们在使用的方式上是不同的。
变异方法
意思就是以下的数组处理方法可以触发视图上的更新。
需要注意的是它们处理的都是原始数组。也就是在原来的数组上增加删除或者排序操作。
非变异方法
数组也有一些方法不会改变原始数据,而是返回新的数组。
返回新的数组在页面更新渲染的性能大家不必担心,vue 已经为我们做好了重用工作。
需要注意,在有些情况 vue 无法检测数组变动的情况如下:
为了解决这类问题,官方提供了两种解决方案。
1、Vue.set
// Vue.setVue.set(vm.items, indexOfItem, newValue)2、Array.prototype.splice
// Array.prototype.splicevm.items.splice(indexOfItem, 1, newValue)如果我们在处理数据无法更新视图的时候记得试试这个方法。
对象变更检测注意事项
对于对象属性的增加和删除,对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。
对于这个问题可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。
v-for 还可以处理整数的循环
最后提醒使用 v-for 时一定要记得带上 key 哟!
神秘的 set
综上我们会知道 js 无法处理组件即时更新的都由 vue 提供的这个 set 方法接管。那么这个 set 有什么过人之处,可以完成组件与数据的绑定呢?
关键位置可以看 vue 源码的这里 github.com/vuejs/vue/b…
set 方法开始会有一些逻辑判断,对于数组的处理依然使用的是 splice 方法。
其余的就交给我们 vue 不支持的 IE8 ECMAScript5 特性 Object.defineProperty
下次我会对 Object.defineProperty 在做详细介绍,今天就到这了,晚安😴。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文主要给大家介绍了关于Vue.js列表渲染的相关资料,分享出来给大家参考学习,下面来看看详细的介绍:v-for可以使用v-for指令基于一个数组渲染一个列表。
简介vue.js是由华人尤雨溪开发的一套MVVM框架。vue.js的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统,它非常适用于具有复杂交
Vue下路由Historymode导致页面无法渲染的原因用Vue.js+vue-router创建单页应用,是非常简单的。使用Vue.js,我们已经可以通过组合组
本文实例讲述了vue.js基于v-for实现批量渲染Json数组对象列表数据。分享给大家供大家参考,具体如下:Vuejs的出现减轻了对DOM的直接操作,同时它提
Nuxt.js是一个建立在Vue.js基础上的服务端渲染框架。它非常易于上手并且可以让你在几分钟内构建你的应用。服务端渲染是一个解决所有SPA的SEO问题的伟大