js array 添加对象_不可不知的 Vue.js 列表渲染
介绍
用 v-for 把一个数组对应为页面上的一组元素
vue.js
使用的是 v-for
指令来处理组件元素的循环迭代逻辑。通常它会和 v-if
配合使用,达到我们所需要的处理逻辑。
v-for
的语法形式是 item in items
,其中 items
就是我们要循环的数组,而 item
则是被迭代的数组元素的别名。
<ul id="example-1"><li v-for="item in items">{{ item.message }}</li>
</ul>
我们都知道既然有循环那肯定少不了对索引的处理。v-for
指令给我们提供了可选的第二个参数,即当前项的索引。
<ul id="example-2"><li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }}</li>
</ul>
index
就是那个当前索引了。
你也可以使用 of
替代 in
作为分隔符。
<div v-for="item of items"></div>
在 v-for 里使用对象
是哒,很明显 v-for
也可以用来遍历一个对象的属性。
<ul id="v-for-object" class="demo"><li v-for="value in object">{{ value }}</li>
</ul>
也可以提供第二个参数为 property
名称 (也就是键名)
<div v-for="(value, name) in object">{{ name }}: {{ value }}
</div>
还可以用第三个参数作为索引
<div v-for="(value, name, index) in object">{{ index }}. {{ name }}: {{ value }}
</div>
维护状态
敲黑板啦哈~
vuejs 为了维护循环列表的状态需要提供唯一的 key
属性。
这个唯一的 key
可以为我们提供列表元素状态的更新,避免重复渲染等优化页面的性能。
这个 key
很关键,并不推荐使用简单的索引作为 key
的值,因为会有造成重复渲染混乱的可能。
数组更新检测
咳咳~ 继续敲黑板
我们在写程序的时候,往往会有数据更新但是页面元素没有跟着对应变化的情况。
数组列表的更新检测 vue
为我们提供了一套解决方案,但是需要注意它们在使用的方式上是不同的。
变异方法
意思就是以下的数组处理方法可以触发视图上的更新。
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
需要注意的是它们处理的都是原始数组。也就是在原来的数组上增加删除或者排序操作。
非变异方法
数组也有一些方法不会改变原始数据,而是返回新的数组。
filter()
concat()
slice()
返回新的数组在页面更新渲染的性能大家不必担心,vue
已经为我们做好了重用工作。
需要注意,在有些情况 vue
无法检测数组变动的情况如下:
- 当你利用索引直接设置一个数组项时,例如:
vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:
vm.items.length = newLength
var vm = new Vue({data: {items: ['a', 'b', 'c']}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
为了解决这类问题,官方提供了两种解决方案。
Vue.set
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
Array.prototype.splice
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
如果我们在处理数据无法更新视图的时候记得试试这个方法。
对象变更检测注意事项
对于对象属性的增加和删除,对于已经创建的实例,Vue
不允许动态添加根级别的响应式属性。
对于这个问题可以使用 Vue.set(object, propertyName, value)
方法向嵌套对象添加响应式属性。
v-for
还可以处理整数的循环
<div><span v-for="n in 10">{{ n }} </span>
</div>
最后提醒使用 v-for
时一定要记得带上 key
哟!
神秘的 set
综上我们会知道 js
无法处理组件即时更新的都由 vue
提供的这个 set
方法接管。那么这个 set
有什么过人之处,可以完成组件与数据的绑定呢?
关键位置可以看 vue
源码的这里 https://github.com/vuejs/vue/blob/dev/src/core/observer/index.js#L201
set
方法开始会有一些逻辑判断,对于数组的处理依然使用的是 splice
方法。
if (Array.isArray(target) && isValidArrayIndex(key)) {target.length = Math.max(target.length, key)target.splice(key, 1, val)return val
}
其余的就交给我们 vue
不支持的 IE8
ECMAScript5
特性 Object.defineProperty
Object.defineProperty(obj, key, {value: val,enumerable: !!enumerable,writable: true,configurable: true
})
下次我会对 Object.defineProperty
在做详细介绍,今天就到这了,晚安 。
js array 添加对象_不可不知的 Vue.js 列表渲染相关推荐
- vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库
vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library f ...
- js 操作vuex数据_请教个有关 Vue.js 使用 Nuxt.js 服务端渲染,使用 Vuex 取数据的时候报错...
查过资料没有什么结果,首先怀疑的是 SSR 的问题,但是简单的测试感觉不是 SSR 的问题.没有找到原因,希望在这里能得到解惑! 使用 Nuxt.js 做服务端渲染,前后端分离,Token 存储在 l ...
- vue生成静态js文件_如何立即使用Vue.js生成静态网站
vue生成静态js文件 by Ondřej Polesný 通过OndřejPolesný 如何立即使用Vue.js生成静态网站 (How to generate a static website w ...
- Js数组转对象(特殊格式)和 JS中将对象转化为数组
Js数组转对象(特殊格式)和 JS中将对象转化为数组 数组转化为对象特殊格式 arr:[ { } ,{ },{ }] 转化为obj:{ { },{ },{ } } 利用ES6语法: let obj = ...
- javascript array添加图片_史上最全的web前端面试题汇总及答案JavaScript之二(二)...
作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
- filter vue 循环_详解在Vue.js编写更好的v-for循环的6种技巧
在vuejs中,v-for循环是每个项目都会使用的东西,它允许您在模板代码中编写for循环. 在最基本的用法中,它们的用法如下. {{ product.name }} 但是,在本文中,我将介绍六种方法 ...
- vue图片裁剪组件_使用Vue-Rx的Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
- vue.js部署_如何将安全Vue.js应用程序部署到AWS
vue.js部署 本文最初发布在Okta开发人员博客上 . 感谢您支持使SitePoint成为可能的合作伙伴. 编写Vue应用程序直观,直接,快捷. Vue具有较低的进入门槛,基于组件的方法以及诸如热 ...
- node js 写按键精灵_带有按键的Node.js Raw模式
node js 写按键精灵 I find the stuff that people are doing with Node.js incredibly interesting. You here ...
最新文章
- 学会做“男人”—Linux Man的使用技巧
- oracle 数据库查询 COALESCE字符函数
- mysql内连接查询原理_MySQL全面瓦解12:连接查询的原理和应用
- R语言时间序列数据应用xts
- 自定义viewgroup实现ArcMenu
- android平台应用技术特点,Android平台应用安全关键技术研究
- 【转】GCC警告选项例解 -- 不错
- 移动端开发语言的未来的猜想#华为云·寻找黑马程序员#
- 跨域-(jsonp cors)
- android之统一字体大小
- c语言delay函数的作用,delay函数 delay() c语言延迟函数
- 工程结算的23个问题及技巧
- 2021年CSDN年度总结:生活总是焦虑与希望并存,流水要争先,靠的是绵绵不绝。
- TikTok干货分享:创作者基金申请流程及常见问题解答
- 朱棣文先生在哈佛大学毕业典礼上的演讲
- 用计算机亩换算成平方,亩数和平方换算(平方米换算亩计算器)
- Caused by: java.lang.NoClassDefFoundError: Class not found using the boot class loader; no stack tra
- html5地图大头针,iOS高德地图之自定义大头针and泡泡view
- vb毕业设计——基于vb+VB.NET的媒体播放器设计与实现(毕业论文+程序源码)——媒体播放器
- 7天物联网智能家居学习记录---第五天