vue调用数组_vue 数组方法
数组更新
vue的核心时数据和视图的双向绑定，当我们修改数组时，vue会检测到数据的变化，所以用v-for渲染的视图也会立即更新。vue包含了一组观察数组变异的方法，使用它们改变数组也会触发视图更新：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
- 书名:{{ book.name }}
- 作者:{{ book.author }}
var app = new Vue({
el:'#app',
data: {
books: [
{
name: 'vuejs',
author: 'liang'
},
{
name: 'javascript',
author: 'douglas'
},
{
name: 'nodejs',
author: 'thomas'
}
]
}
});
app.books.push({
name:'css',
author: 'dsss'
});
使用以上方法会改变被这些方法调用的原始数组，有些地方不会改变原始数组，例如：
filter()
concat()
slice()
- 书名:{{ book.name }}
- 作者:{{ book.author }}
var app = new Vue({
el:'#app',
data: {
books: [
{
name: 'vuejs',
author: 'liang'
},
{
name: 'javascript',
author: 'douglas'
},
{
name: 'nodejs',
author: 'thomas'
}
]
}
});
app.books = app.books.filter(function (item) {
return item.name.match(/javascript/);
})
vue在检测数组变化时，并不是直接重新渲染整个列表，而是最大化地复用DOM元素。替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用担心性能问题。
通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组，并且不改变原数组。
- 书名:{{ book.name }}
- 作者:{{ book.author }}
var app = new Vue({
el:'#app',
data: {
books: [
{
name: 'vuejs',
author: 'liang'
},
{
name: 'javascript',
author: 'douglas'
},
{
name: 'nodejs',
author: 'thomas'
}
]
},
computed: {
filterBooks: function () {
return this.books.filter(function (book) {
return book.name.match(/javascript/);
});
}
}
});
实现排序也是类似的，新加一个计算属性sortedBooks，按照书名的长度由长到短进行排序
computed: {
sortedBooks: function () {
return this.books.sort(function (a,b) {
return a.name.length < b.name.length;
});
}
}
本作品采用《CC 协议》，转载必须注明作者和本文链接
vue调用数组_vue 数组方法相关推荐
- vue调用数组_vue数组的运用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 :data="partsData" 18 style="width: 100%&quo ...
- vue字符串列表转换数组_vue 数组对接字符串 传值时候，join(',') 一下 watch
linux TCP: time wait bucket table overflow 早上一台rabbitmq和Java所在的服务器,客户端反馈超级卡,看io和cpu都不高.发现六七万消息挤压,临时性 ...
- vue 数组中嵌套数组_vue数组嵌套数组的问题
如图,饼干.健康零食.早点下午茶.中式糕点.西式糕点是外层的数组,用v-for来完成,但是数组里面还有一个数组,这个还是用v-for吗?应该怎么做?我就是在v-for里面又用了一个v-for,代码如下 ...
- vue调用methods里的方法
刚学vue的时候,以为要想方法自启动,只能通过生命周期函数的钩子. 而methods里的函数大多用@ckick进行调用 要想直接启用里面的方法,给挂载的vue一个名字就行了,如下 var app = ...
- vue父组件中调用子组件中的方法 及vue父组件调用孙子组件的方法
一:通过ref直接调用子组件的方法: 子组件child.vue: <template><div>我是子组件</div> </template> < ...
- vue 拷贝 数组_vue源码中值得学习的方法
最近在深入研究vue源码,把学习过程中,看到的一些好玩的的函数方法收集起来做分享,希望对大家对深入学习js有所帮助.如果大家都能一眼看懂这些函数,说明技术还是不错的哦. 1. 数据类型判断 Objec ...
- vue 怎么在字符串中指定位置插入字符_Vue数组变更方法
Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新.这些被包裹过的方法包括: push() pop() shift() unshift() splice() sort() reve ...
- vue 获取数组索引_Vue - 数组方法
变异方法(修改原有数组) push() pop() shift() unshift() splice() sort() reverse() Vue对数据的处理一般都是响应式的,而原生JS数组方法对数据 ...
- vue数组刷新_Vue数组更新方法
Vue的核心是数据与视图的双向绑定,当我们修改数组时,Vue会检测到数据变化,所以用v-for渲染的视图也会立即更新.Vue包含了一组观察数组变异的方法,使用他们改变数组也会触发视图更新. push( ...
最新文章
- 小程序实现瀑布流，获取图片高度分成两组数据的函数封装代码
- 互联网共鸣之声：2018年或成为云计算转折之年
- mongodb转json
- 【干货】什么是好的社交产品
- 【BIOS大全】释义+设置+精解+释疑————玩转电脑必备工具帖（8）
- vscode关闭go语言的黄色波浪线
- AC_Automata模板
- mysql 日志节点恢复_基于binlog二进制日志的MySQL恢复笔记
- poj 3370 Halloween treats
- iOS 让UIButton根据文字内容自动计算宽高
- SQL Server 2012笔记分享-28：使用日志文件查看器
- Windows 编程[6] - 学习窗体生成的过程六: 最终的代码!
- Thinking in java Java编程思想 该不该读
- jmeter分布式部署
- PhysX For Autodesk 3dMax 2016 64下载
- 卓训教育：孩子叛逆厌学怎么办？孩子不想去上学怎么办？
- 搭建深度学习网络时节约GPU显存的技巧
- 深入原理64式：46 高中数学公式总结
- Rust学习笔记（14）——struct、Option和Box组合应用实现单向链表之二
- 微信小程序之input 边框