Vue中的列表渲染

2019年2月27日19:37:58 发表评论 99 阅读

本来计划是不中断的持续输出内容,这样有一个好处,就是自己有在思考,专注的去干一件事情,久而久之会养成一种习惯,形成一种正反馈。

sigh,计划赶不上变化,期间过年走亲戚+学车耽搁了这么长时间,现在事情都办完了,接着学习。

言归正传

我们在做列表循环的时候,为了提高性能,会给每一个循环项添加唯一的key值,我们可以发现index的下标是唯一的,但是因为其比较费性能,vue没办法充分复用dom节点,所以不用这个。

不用index下标,那么要用什么呢?一般来说,在后端向前端返回数据的时候,一般会带有一个数据条目的标识符,叫做“id”,因此我们可以用id作为唯一的key值。

我们先把数据写死看一下例子:

  1. <div id="app">
  2.         <div v-for="(item, index) of List"
  3.              :key="item.id"//item为数组元素别名,List为循环的数组
  4.             {{item.text}} --- {{item.id}}
  5.         </div>
  6.     </div>
  7.     <script>
  8.         var vm = new Vue({
  9.             el: "#app",
  10.             data: {
  11.                 List: [{
  12.                     id: "01010101",
  13.                     text: "hello"
  14.                 },{
  15.                     id: "01010102",
  16.                     text: "dell"
  17.                 },{
  18.                     id: "01010103",
  19.                     text: "lee"
  20.                 },{
  21.                     id: "01010104",
  22.                     text: "llo"
  23.                 },]
  24.             }
  25.         })
  26.     </script>
注意

当我们尝试去修改数组的内容时,不能通过数组下标的形式去修改,需要使用vue提供的几个数组变异方法操作,这样才能实现数组发生变化页面随之改变的响应式更新效果。

vue中提供了7个可用变异方法,分别是:

  •  push //增加新的元素
  • pop //删除数组最后1个元素
  • shift //删除数组第1个元素
  • unshift //在数组的开头添加1个或多个元素
  • splice //截取数组
  • sort //数组排序
  • reverse //数组取反

举个栗子

Vue中的列表渲染

默认的数据是这样的

Vue中的列表渲染

当我们使用变异方法splice操作后是这样的,可以明显看到第二行的数据由dell --- 01010102响应式刷新为dell --- 123456

那么除了变异方法,还有别的方法可以实现改变数据响应式更新视图吗?嗯,改变引用可以做到。

什么是改变引用呢?

Vue中的列表渲染

划红线的地方为List数组引用的地方,那么只需要直接改变这里的内容,即可实现响应式更新视图。

举个栗子

Vue中的列表渲染

可以发现,数据已经被改变。

对象循环

  1. <div id="app">
  2.         <div v-for="(item, key,index) of userInfo">
  3.             {{key}} --- {{item}} --- {{index}}
  4.         </div>
  5.     </div>
  6.     <script>
  7.             var vm = new Vue({
  8.             el: "#app",
  9.             data: {
  10.                userInfo:{
  11.                    name: "Dell",
  12.                    age: "28",
  13.                    gender: "male",
  14.                    salary: "secret"
  15.                }
  16.             }
  17.         })
  18.     </script>

刷新页面,对象被成功渲染在页面上:

Vue中的列表渲染

那么当我们尝试去添加对象中的内容时,要怎么去做呢?我们可以这样做:Vue中的列表渲染

通过改变vm实例中userInfo中的引用来实现添加一条数据,而且页面随之发生改变。

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
  • A+
所属分类:JS
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛