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. 当你利用索引直接设置一个项时, ...
随机推荐
- java Integer parseInt()
先来一段代码,代码很简单的,如下: public static void main(String[] args) { Integer a = Integer.parseInt("3" ...
- 洛谷——P2784 化学1（chem1）- 化学合成
P2784 化学1(chem1)- 化学合成 题目背景 蒟蒻HansBug在化学考场上,挠了无数次的头,可脑子里还是一片空白. 题目描述 眼下出现在蒟蒻HansBug面前的是一个化学合成题,据他所知, ...
- poj 1348 Period(KMP)
Period Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- BZOJ 3083 遥远的国度（树链剖分+线段树）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3083 [题目大意] 链修改,子树最小值查询和换根操作 [题解] 树链剖分练习题. [代 ...
- rmq问题：ST表
存板子.O(nlogn)预处理,O(1)查询.空间O(nlogn). int d[1000006][25]; int mn[1000006]; void rmq_init() { for(int i= ...
- 【KMP模板】POJ3461-Oulipo
[题意] 找出第一个字符串在第二个字符串中出现次数. [注意点] 一定要先将strlen存下来,而不能每次用每次求,否则会TLE! #include<iostream> #include& ...
- Scala 数据类型
Scala 与 Java有着相同的数据类型,下表列出了 Scala 支持的数据类型: Byte8位有符号补码整数.数值区间为 -128 到 127 Short16位有符号补码整数.数值区间为 -327 ...
- CentOS 5/6安装后的必备设置（转）
说明:转自各大优化方案,相当于是一个大杂烩,后续会搞成是一个Shell脚本简化操作. 1.修改ip地址.网关.主机名.DNS等 (这个操作可以使用Setup工具进行配置,但不建议使用,封装太多,没有配 ...
- POJ 2187 Beauty Contest （求最远点对，凸包+旋转卡壳）
Beauty Contest Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 24283 Accepted: 7420 D ...
- shell中job管理
参考 http://www.cnblogs.com/ggjucheng/archive/2012/10/21/2733028.html 在命令后添加一个&,如firefox &: ...