最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

Vue数组更新方法

Vue的核心是数据与视图的双向绑定,当我们修改数组时,Vue会检测到数据变化,所以用v-for渲染的视图也会立即更新。Vue包含了一组观察数组变异的方法,使用他们改变数组也会触发视图更新。

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

比如以下例子:

<div id="app">
	<ul>
		<li v-for="book in books">{{ book.name }}</li>
	</ul>
</div>

JavaScript代码:

var app = new Vue({
	el: '#app',
	data:{
		books:[
			{ name: '《Vue.js实战》' },
			{ name: '《JavaScript语言精粹》' },
			{ name: '《JavaScript高级程序设计》' }
		]
	}
});

然后,我再给数据books添加一项:

app.books.push({
	name: '《css解密》'
});

使用上面的方法会改变原始数组,当然也有些方法不会改变原数组,例如:

  • filter()
  • concat()
  • slice()

他们返回的是一个新数组,在使用这些非变异方法时,可以用新数组来替换原数组,以下例子,我们找出含有JavaScript关键词的数目,例如:

<div id="app">
	<ul>
		<template v-for="book in books">
			<li>书名:{{ book.name }}</li>
			<li>作者:{{ book.author }}</li>
		</template>

	</ul>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data:{
			books:[
				{
					name: '《Vue.js实战》',
					author: '梁灏'
				},
				{
					name: '《JavaScript语言精粹》',
					author: 'Douglas Crockford'
				},
				{
					name: '《JavaScript高级程序设计》',
					author: 'Nicholas C.Zakas'
				}
			]
		}
	});

	app.books = app.books.filter(function (item){
		return item.name.match(/JavaScript/);
	});
</script>
Vue数组更新

渲染的结果中,第一项《Vue.js实战》被过滤到了,只显示书名中含有JavaScript的选项。

Vue在检测到数组变化时,并不是直接重新渲染整个列表,而是最大化的复用DOM元素。替换的数组中,含有相同元素的项不会被重新渲染,因此可以大胆地用新数组来替换旧数组,不用担心新能问题。

需要注意的是,以下变动的数组中,Vue是不能检测到的,也不会触发视图更新:

  • 通过索引直接设置项,比如app.books[3] = {…}。
  • 修改数组长度,比如app.books.length = 1。

解决第一个问题可以用两种方法实现同样的效果,第一种是使用Vue内置的set方法:

Vue.set(app.books, 3, {
	name: '《css解密》',
	author: '[希] Lea Verou'
});

如果是在webpack中使用组件化的方式,默认是没有导入Vue的,这时可以使用$set,例如:

this.$set(app.books, 3, {
	name: '《css解密》',
	author: '[希] Lea Verou'
});

//这里的this指向的就是当前组件实例,即app。在非webpack模式下也可以用$set方法,例如app.$set(…)

另一种方法:

app.books.splice(3, 1, {
	name: '《css解密》',
	author: '[希] Lea Verou'
});

第二个问题也可以直接用splice来解决:

app.books.splice(1);
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » Vue数组更新方法

2 评论

  1. 总结的很好。

发表评论