变异方法 (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. javaSE之运行时异常和编译时异常

    运行时异常继承自RuntimeException; package foundationEnhance; public class Person { private int age; public P ...

  2. 19 如何在String和Byte[]对象之间进行转换?

  3. yolo v3 loss=nan, Avg loss=nan的一种原因

    我这里是由于数据整理错误导致的,同一标注区域重复2次送入模型,具体如下: 0.798046875 0.5555555555555556 0.04296875 0.03611111111111111 0 ...

  4. Web开发中的服务器跳转与客户端跳转

    两者比较如下: 跳转类型  客户端请求次数 服务端响应次数 URL变化 站外跳转 作用域 服务器跳转 1 1 无 否 pageContext.request.session.application 客 ...

  5. Transaction 在同一个类中不生效

    参考:https://blog.csdn.net/qq_30336433/article/details/83338835 最近在开发项目中踩到一个坑,以此记录下来.以备后来人借鉴 1.相信使用spr ...

  6. properties与yml之间的比较

    在Spring Cloud的配置文件中,发现使用yml与properties两种后缀的文件: 在application.properties中内容是这样的: server.port=8801eurek ...

  7. jsqlparser

    摘要:SQL语法解释器jsqlparser 是用java开发的解析器,可以生成java类层次结构. 主页地址:http://jsqlparser.sourceforge.net 可以完美解析表的增删查 ...

  8. CSS实现回到顶部图片hover后改变效果

    任何网站中回到顶部元素不可缺少,一般为了实现交互效果,都会在鼠标hover后元素样式有所改变.今天这个实例便是采用CSS中的transform知识实现. hover: <!DOCTYPE htm ...

  9. oracle SQL in plsql

    刚安装好的oracle和plsql,以oracle11g为例 1.刚安装好后有两个默认的系统账号和初始密码:sys/change_on_install,system/manager 2.如果忘记了或不 ...

  10. Cadence 学习

    记录学习Cadence的资料 Cadence 16.6软件             链接: http://pan.baidu.com/s/1mgwSeYs 密码: jemk 于博士视频教程(15.7版 ...