3-7 Vue中的列表渲染

时间:2023-03-09 19:20:10
3-7 Vue中的列表渲染

 举个案例:循环data中的list的值在div中,并显示相应的index值。

关于数组的循环:

3-7 Vue中的列表渲染

//显示效果如下图:

3-7 Vue中的列表渲染

//一般的列表渲染最好带一个key值,要把key值设置为唯一值的话,可以选择index。但在频繁操作DOM元素相对应的数据的时候,它还是有点浪费性能,可能让Vue没法充分复用DOM节点,所以不太建议用index来做key值

//所以一般的项目中的后端会传递过来一些数据,这些数据可以把它作为key值来使用(一般会携带一个后端或数据库相关的一个唯一的数据条目标识符,例如:id)

//修改如下图所示:

3-7 Vue中的列表渲染

//把key值设置成(item.id)既是唯一的,同时又不是index下标,就能保证key值的使用最终是正确的,性能上最高

//在使用key值的时候,每个循环项最好带一个key值,提高性能;为了让key值达到最优效果,就要把key设为唯一的,尽量不用index下标作为key值

===============================================================

接下来讲解一下:如何动态的往列表里添加内容

3-7 Vue中的列表渲染

//如上,运用数组中的push()方法,当往数组里添加内容的时候页面会自动的响应出增加的内容

3-7 Vue中的列表渲染

//如上,当直接用下标的方法来添加数组内容的时候,页面上并没有把添加的数据显示出来。然后在控制台中输入vm.list来查看数据的时候,发现里面是有数据的添加的,只是没有显示在页面上而已

//总结:当我们去尝试更改数组里面的内容的时候,不能直接通过下标的形式来改变数组;只能通过Vue提供的几个数组变异方法来操作数组,才能够实现数据变化,页面也跟着变化

  Vue中一共提供了7种数组的变异方法:pop(把数组最后一项删除掉)、push(往数组里增加一条)、shift(删除数组里的第一项)、unshif(往数组里的第一项增加内容)、splice(数组的截取/操作方法)、sort(对数组进行排序)、reverse(对数组进行取反)

 

//接下来讲解一下:把页面上的数据George修改为Rose

方法一:改变数组的内容

//用splice()的方法来改变Gerorge,表达式中写入(1,1,{id:'001',text:'Rose'})即可。  表达式中第一个1表示数组中的第一项(即list[1]),第二个1表示删除一条内容,{id:'001',text:'Rose'}表示往里增加一条内容

3-7 Vue中的列表渲染

方法二:改变数组中的数据引用

//改变数据上新的引用,直接把数据的第二项(即list[1]的text直接修改)

3-7 Vue中的列表渲染

若要在div外再循环一个span标签,可以用template方法来实现效果,代码如下图:

3-7 Vue中的列表渲染

//显示效果如下:  div和span标签都循环了

3-7 Vue中的列表渲染

//用template模板占位符可以去包裹一些元素,但是在循环的过程中,他并不会真正的被渲染到页面上

==================================================

关于对象的循环:

3-7 Vue中的列表渲染

//显示效果如下:

3-7 Vue中的列表渲染

//如上,key值指向的就是这个对象中的键名(例:name),而item值指向的就是这个对象的键值(例:‘George’),index值指向的就是它在对象中的第几个位置

===============================================================

接下来讲解一下:如何动态的往列表里添加内容

3-7 Vue中的列表渲染

//如上,当改userInfo的name值时,数据变了,页面也跟着改变了。而当你添加一个新的数据时,数据有发生变化,但是页面上并没有显示出来效果。所以说,当在遍历对象的时候,直接动态的往对象里面加值是不好用的。但是如果硬要是往里面添加的话呢,就类似于数组一样,直接把对象的引用赋值进去改变就行了(会比较麻烦)

//操作如下:

3-7 Vue中的列表渲染

==================================================

 对象中:

还可以采取另外一种方法来实现:  即Vue.set()方法!

//在控制台中用set方法也可以实现在对象中添加数据。如:Vue.set(vm.userInfo,'address','Beijing'),这段代码的编写,就可以实现在页面和对象中添加一个新的数据address    显示效果如下图:

3-7 Vue中的列表渲染

//然而,Vue.set()方法不仅可以这样来使用,还可以用Vue实例的方法来使用  (它既是一个Vue中的全局方法,同时也是Vue中的实例方法)

//用vm.$set(vm.userInfo,'address','Beijing')的实例方法也可以照样实现如上效果,演示效果如下图:

3-7 Vue中的列表渲染

===============================================================

数组中:

也可以采取另外一种方法来实现:  即Vue.set()方法!

稍微更改一下之前的代码,简化一下:

3-7 Vue中的列表渲染

然后在控制台上进行set方法的使用,如下图操作:

3-7 Vue中的列表渲染

//如上,可以发现数组的set方法也是像对象的使用一样,而且同样都可以达到效果!其中(vm.userInfo,1,5)的“1”指的是数组的第二项(即userInfo[1]),“5”指的是需要修改的内容。