变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

下面上实例代码:

 <div id="example">

   <div>

     <button @click="concat()">concat</button>

     <button @click="slice()">slice</button>

     <button @click="filter()">filter</button>

   </div>

   <ul>

     <li v-for="item in items">

       {{item.list}}

     </li>

   </ul>

 </div>

 <script>

   var example = new Vue({

     el:"#example",

     data:{

       items:[

         {list:5},

         {list:6},

         {list:7}

       ],

       addValue:{list:10}

     },

     methods:{

       concat(){

      this.items= this.items.concat(this.addValue)

       },

       slice(){

       this.items = this.items.slice(1)

       },

       filter(){

       this.items = this.items.filter(function(item,index,arr) {

           return (index > 0)

         })

       }

     }

   })

以上操作并不会导致Vue丢弃现有DOM并重新渲染整个列表。Vue实现了一些智能启发式方法来最大化DOM元素重用，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作

#注意事项

 注意事项

 由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

 当你修改数组的长度时，例如：vm.items.length = newLength

 为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

 // Vue.set

 Vue.set(example1.items, indexOfItem, newValue)

 // Array.prototype.splice

 example1.items.splice(indexOfItem, 1, newValue)

 为了解决第二类问题，你可以使用 splice：

 example1.items.splice(newLength)

上段文字的意思就是假如有一个数组

 // 第一类问题如下

 var arr = [1,2,3,4,5];

 arr[0] = 6; // 利用索引直接设置一个项时Vue检测不到

 //第一类问题需要这样解决:

 Vue.set(arr, 0, 6);

 //第二类问题如下:

 var arr = [1,2,3,4,5];

 arr.length = 2; // 这样Vue也是无法检测到的

 //第二类方法可以用splice解决

 arr.splice(2);

直接上代码结束这篇博客

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>注意事项</title>

 <script src="vue.js"></script>

 </head>

 <body>

   <div id="example">

     <div>

       <button @click="setVal">setVal</button>

       <button @click="setLength">setLength</button>

       <button @click="pop">pop</button>

     </div>

     <ul>

       <li v-for="item in items">{{ item }}</li>

     </ul>

     <p> {{ message }} </p>

   </div>

   <script>

   var watchFunc = function(){

     example.message = "数据发生变化";

     setTimeout(function(){

       example.message = "";

     },500)

   }

  var example = new Vue({

       el:"#example",

       data:{

         items:['Foo','Bar','BaZ',"Hello"],

         message:"",

       },

       watch:{

         items:watchFunc

       },

       methods:{

         pop(){

           this.items.pop()

         },

         setVal(){

           Vue.set(this.items,0,'match')

         },

         setLength(){

           this.items.splice(2);

         }

       }

     })

   </script>

 </body>

 </html>

Vue-列表渲染 非变异方法的更多相关文章

  1. Vue 列表渲染及条件渲染实战

    条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...

  2. Vue列表渲染-变异方法

    Vue 包含一组观察数组的变异方法,变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组 所以它们也将会触发视图更新.这些方法如下: push() pop() shi ...

  3. Vue.js高效前端开发 • 【Vue列表渲染】

    全部章节 >>>> 文章目录 一.v-for指令 1.v-for指令使用 2.实践练习(待更新) 二.计算属性 1.计算属性创建和使用 2.实践练习(待更新) 三.侦听属性 1 ...

  4. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

  5. Vue入门系列（三）之Vue列表渲染及条件渲染实战

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  6. vue 列表渲染

    在Vue官网中写道,vue无法直接用索引设置元素, 如 vm.items[0] = {}: 提出的解决方法是用 : example1.items.$set(0, { childMsg: 'Change ...

  7. Vue列表渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...

  8. (尚009)Vue列表渲染

    变异方法:说白了就是对原方法进行了包装,包装后实现了2个功能1:实现原方法的功能;2.更新界面. 1.test009.html <!DOCTYPE html><html lang=& ...

  9. 14 Vue列表渲染

    列表渲染 用 v-for 把一个数组对应为一组元素(for循环) 我们可以用 v-for 指令基于一个数组来渲染一个列表. v-for 指令需要使用 item in items 形式的特殊语法, 其中 ...

随机推荐

  1. SpringBoot 快速集成 Elastic Job

    一.引入依赖 <dependency> <groupId>com.github.kuhn-he</groupId> <artifactId>elasti ...

  2. redis集群报错：(error) CLUSTERDOWN The cluster is down

    更换了电脑,把原来的电脑上的虚拟机复制到了新电脑上,启动虚拟机上的centos系统,然后启动redis集群(redis5版本),发现集群可以启动,redis进程也有,但是连接集群中的任意节点就报错,如 ...

  3. Jmeter参数化控件意见收集

    1.可以读取EXCEL,可以自定义SHEET,行和列: 2.数据可以加密传输,加密方式如下: 1)SHA1 2)SHA224 3)SHA256 4)SHA384 5)SHA512 6)MD5 7)Hm ...

  4. 06 IntelliJ IDEA构建多模块项目

  5. php strspn()函数 语法

    php strspn()函数 语法 作用:返回字符串中包含某些字符的数目.大理石平台厂家 语法:strspn(string,charlist,start,length) 参数: 参数 描述 strin ...

  6. BZOJ 1596: [Usaco2008 Jan]电话网络 树形DP

    挺经典的,细节需要特别注意一下 Code: #include<bits/stdc++.h> using namespace std; #define setIO(s) freopen(s& ...

  7. 2019 上海网络赛 F Rhyme scheme (字典树DP)

    题目:https://nanti.jisuanke.com/t/41414 题意:求长度为n的第k个bell number  ,  就是第i位的选取范围在 1-(i-1)位的最大值 +1,第一位固定为 ...

  8. 攻防世界 | hello_pwn

    看样子是要让我们通过read(0, &unk_601068, 0x10uLL),读入 unk_601068 将 dword_60106C 覆盖 6c-68=4,所以: from pwn imp ...

  9. leetcode 292. Nim游戏（python）

    你和你的朋友,两个人一起玩 Nim 游戏:桌子上有一堆石头,每次你们轮流拿掉 1 - 3 块石头. 拿掉最后一块石头的人就是获胜者.你作为先手. 你们是聪明人,每一步都是最优解. 编写一个函数,来判断 ...

  10. python numpy求四分位距

    import numpy as np ages=[3,3,6,7,7,10,10,10,11,13,30] lower_q=np.quantile(ages,0.25,interpolation='l ...