VUE 数组更新
1、数据方法分类：
（1）原数组改变
push
pop
unshift
shift
reverse
sort
splice
（2）原数组未变，生成新数组
slice
concat
filter
map
对于使原数组变化的方法，可以直接更新视图。
对于原数组未变的方法，可以使用新数组替换原来的数组，以使视图发生变化。
示例代码：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
<ul>
<template v-for="book in books">
<li>书名：{{book.name}}</li>
<li>作者：{{book.author}}</li>
</template>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
books: [{
name: 'vuejs',
author: 'a'
},
{
name: 'js高级',
author: 'b'
},
{
name: 'java',
author: 'c'
}
]
}
});
//直接可以使得视图改变
//app.books.push({name: 'c++',author: 'd'});
//需要更新原数组
app.books = app.books.concat([{name: 'c++',author: 'd'}]); </script>
</body> </html>
注意：以下不会触发视图的更新。
（1）通过索引直接设置项。
（2）修改数组长度，app.books.length=1。
若不想改变原数组，可以使用计算属性来过滤数组，如：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
<ul>
<template v-for="book in filterBooks">
<li>书名：{{book.name}}</li>
<li>作者：{{book.author}}</li>
</template>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
books: [{
name: 'vuejs',
author: 'a'
},
{
name: 'js高级111',
author: 'b'
},
{
name: 'java33333',
author: 'c'
}
]
},
computed:{
filterBooks:function(){
return this.books.sort(function(a,b){
return a.name.length>b.name.length?1:-1
})
}
}
}); </script>
</body> </html>
上述代码是按照书的名字由短到长排序。这个不会修改原数组。
VUE 数组更新的更多相关文章
- Vue数组更新及过滤排序
前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...
- vue 数组更新 this.$set(this.dataList, data.index, data.data)
vue 数组更新 this.$set(this.dataList, data.index, data.data) https://www.cnblogs.com/huangenai/p/9836811 ...
- vue数组更新界面无变化
1. vue数组更新界面无变化 1.1. 说明 对数组进行更新或者添加,一定要注意方式,我的情况是数组套数组,双重循环,在造数据的时候,不断从尾部添加数据,所以写成了如下形式,每次下拉都会去加载一批相 ...
- vue 数组更新（push【可用】，$set，slice,filter,map【都属于浅拷贝】）问题
this.$axios.post('https://....php',this.$qs.stringify({ user: 'suess' })) .then(res => { this.dat ...
- vue 数组更新检测注意事项
- vue数组操作不更新视图问题
vue 观察数组的变异方法 更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...
- vue 数组中嵌套的对象添加新属性--页面更新
vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735
- ch7-列表渲染(v-for key 数组更新检测 显示过滤/排序结果)
1 说明 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. ...
- vue 数组渲染问题
vue 数组渲染问题 问题一: 用v-for循环渲染数组数据时,数据更新了,视图却没有更新 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 当你利用索引直接设置一个项时, ...
随机推荐
- 单例（LintCode）
单例 单例 是最为最常见的设计模式之一.对于任何时刻,如果某个类只存在且最多存在一个具体的实例,那么我们称这种设计模式为单例.例如,对于 class Mouse (不是动物的mouse哦),我们应将其 ...
- Sqli-labs less 2
Less-2 将'(单引号)添加到数字中. 我们又得到了一个Mysql返回的错误,提示我们语法错误. You have an error in your SQL syntax; check the m ...
- 【找规律】【递归】XVII Open Cup named after E.V. Pankratiev Stage 4: Grand Prix of SPb, Sunday, Octorber 9, 2016 Problem F. Doubling
题意: 给你一个n,问你R(n)对应的字符串长度最小的是啥. dp打个表出来,f(i)表示i值对应的字符串的最小长度,发现f(1)=1,f(2)=2,其他的情况下,若是偶数,则恰好在其外面加一对中括号 ...
- 【SAM】codevs3160-最长公共子串
[题目大意] 求两个字符串的最长公共子串. [思路] 对第一个字符串建立后缀自动机,第二个字符串去匹配.cnt记录当前最长公共子串的长度,而ret记录答案. p代表位置指针,初始在rt位置. 对于第二 ...
- lightoj 1052 - String Growth & uva 12045 - Fun with Strings 矩阵
思路:很容易发现规律,数列和Fib数列一样的. 记开始的时候啊a的个数为Y,b的个数为X.建立矩阵. 代码如下: #include<iostream> #include<cstdio ...
- [百度之星2014资格赛] Disk Schedule 报告
Disk Schedule Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) To ...
- jquery 封装的ajax调用
(function(){ var Ploy = { Config: { ajaxUrl: "/ajax/ploy.ashx" ...
- 高并发环境下，Redisson实现redis分布式锁
原文:http://tlzl0526-gmail-com.iteye.com/blog/2378853 在一些高并发的场景中,比如秒杀,抢票,抢购这些场景,都存在对核心资源,商品库存的争夺,控制不好, ...
- ImageWriter制作ubuntu的U盘启动盘
转自:http://my.oschina.net/f839903061/blog/197935?p={{currentPage+1}} 1.工具从ubuntn中文网中下载指定软件:ImageWrite ...
- Android内存优化8 内存检测工具2 LeakCanary——直白的展现Android中的内存泄露
之前碰到的OOM问题,终于很直白的呈现在我的眼前:我尝试了MAT,但是发现不怎么会用.直到今天终于发现了这个新工具: 当我们的App中存在内存泄露时会在通知栏弹出通知: 当点击该通知时,会跳转到具体的 ...