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 数组更新的更多相关文章

  1. Vue数组更新及过滤排序

    前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...

  2. 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 ...

  3. vue数组更新界面无变化

    1. vue数组更新界面无变化 1.1. 说明 对数组进行更新或者添加,一定要注意方式,我的情况是数组套数组,双重循环,在造数据的时候,不断从尾部添加数据,所以写成了如下形式,每次下拉都会去加载一批相 ...

  4. vue 数组更新（push【可用】，$set，slice,filter,map【都属于浅拷贝】）问题

    this.$axios.post('https://....php',this.$qs.stringify({ user: 'suess' })) .then(res => { this.dat ...

  5. vue 数组更新检测注意事项

  6. vue数组操作不更新视图问题

    vue 观察数组的变异方法 更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...

  7. vue 数组中嵌套的对象添加新属性--页面更新

    vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735

  8. ch7-列表渲染(v-for key 数组更新检测 显示过滤/排序结果)

    1 说明 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. ...

  9. vue 数组渲染问题

    vue 数组渲染问题 问题一: 用v-for循环渲染数组数据时,数据更新了,视图却没有更新 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 当你利用索引直接设置一个项时, ...

随机推荐

  1. 【我要学python】爬虫准备之了解基本的html标签

    HTML 标题 <h1>This is a heading</h1> HTML 段落 <p>This is a paragraph.</p> HTML ...

  2. Junit3.8源码--核心类

    好久没画图了,看下这个序列图,还算比较清晰的: 以textui来分析: Test 顶层接口.TestSuite和TestCase均实现此接口,在具体执行的时候面向此接口编程,弱化类型,实现各自的执行流 ...

  3. luogu P1016 旅行家的预算

    题目描述 一个旅行家想驾驶汽车以最少的费用从一个城市到另一个城市(假设出发时油箱是空的).给定两个城市之间的距离D1.汽车油箱的容量C(以升为单位).每升汽油能行驶的距离D2.出发点每升汽油价格P和沿 ...

  4. 2017 Multi-University Training 1 解题报告

    Add More Zero Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  5. JDK源码学习笔记——HashSet LinkedHashSet TreeSet

    你一定听说过HashSet就是通过HashMap实现的 相信我,翻一翻HashSet的源码,秒懂!! 其实很多东西,只是没有静下心来看,只要去看,说不定一下子就明白了…… HashSet 两个属性: ...

  6. Java操作excel表格

    (1)Java读取excel表格 package com.songyan.excel; import java.io.File; import java.io.FileInputStream; imp ...

  7. [转]Java常用概念解答

    1. 事务是什么? 事务是作为一个逻辑单元执行的一系列操作,一个逻辑工作单元必须有四个属性,称为 ACID(原子性. 一致性.隔离性和持久性)属性,只有这样才能成为一个事务: 原子性 事务必须是原子工 ...

  8. oracle client PLSQL配置

    date:20140525auth:Jin platform :windows 一.服务端启动服务和创建账号# su - oracle$ lsnrctl start$ sqlplus / as sys ...

  9. Linux下使用cut切割有规则的列文本

    data.txt NO Name Mark Percent 1 Sarath 45 90 2 Alex 49 98 3 Anu 45 90 分隔符(定界符)为Tab 制表符 如果我要取得第二列,所有人 ...

  10. Ubuntu 16.04搭建OpenVPN服务器以及客户端的使用

    说明:启动时注意用户权限,比如root用户启动. Ubuntu: 服务器环境:Ubuntu 16.04 64位系统 内网IP:10.143.80.116 外网IP:203.195.1.2 OpenVP ...