Vue 中的列表渲染
列表渲染
<div id="app"><div v-for="(item,index) of list" :key="index">{{item}} ---- {{index}}</div>
</div>
let vm = new Vue({el: '#app',data: {list: ["hello","Dell","nice","to","meet","you"]}
})
上面是一个最基础的列表渲染,在实际开发中,还有很多细节点,为了提升循环的性能,会给循环项加一个唯一的key
值。我们可以用index
作为唯一的key
值。
其实不推荐大家这样使用index
的,因为这样使用index
作为key
值,在你频繁操作dom
元素时,会比较费性能,无法充分让 Vue 复用dom
。
key
值
不用index
作为key
值,那用什么作为key
呢?一般来说每个数据都有唯一的一个id
,用它来作为key
值就行了。
如下:
<div id="app"><div v-for="(item,index) of list" :key="item.id"> //key 值就没有必要使用 index{{item.text}} ---- {{index}}</div>
</div>
let vm = new Vue({el: '#app',data: {list: [{id: 1, text: 'hello'},{id: 2, text: 'Dell'},{id: 3, text: 'Lee'}]}
})
列表提高性能,要在每一项上带一个key
值,key
值要唯一,且最好不要用index
做key
值。
往列表项添加内容
往列表项里面添加内容,只需使用push
语法就可以了。
vm.list.push({id: 4,text: 'I am tiantian'})
有时候会这样写
vm.list[4] = {id: 4,text: 'I am tiantian'}
这样写其实是有问题的,列表虽然更新了,但是页面却没有更新。这是为什么呢?
当我们尝试修改数组内容的时候,不能通过下标的形式来改变这个数组,我们只能通过Vue 提供的几个数组变异方法,来操作数组,才能够实现,数据发生变化,页面也能发生变化这种效果。
Vue 提供了七种数据变异方法,分别是:push
、pop
、shift
、unshift
、splice
、sort
、reverse
改变引用
除了使用变异方法,我们还能使用其他方法吗?改变数据的引用
vm.list = [{id: 1, text: 'hello'},{id: 2, text: 'Dell'},{id: 3, text: 'Lee'},{id: 4, text: 'I am tiantian'},
]
这时候你会发现,数据变了,页面也会跟着重新渲染。
循环多项
如果还有一个元素需要循环,在写一层循环的话,性能肯定会有影响。
<div id="app"><div v-for="(item,index) of list" :key="item.id">{{item.text}} ---- {{index}}</div><span v-for="(item,index) of list" :key="item.id">{{item.text}}</span>
</div>
let vm = new Vue({el: '#app',data: {list: [{id: 1, text: 'hello'},{id: 2, text: 'Dell'},{id: 3, text: 'Lee'}]}
})
很容易就想到,那么我在外面加一层div
不就行了。
<div id="app"><div v-for="(item,index) of list" :key="item.id"><div>{{item.text}} ---- {{index}}</div><span>{{item.text}}</span></div>
</div>
let vm = new Vue({el: '#app',data: {list: [{id: 1, text: 'hello'},{id: 2, text: 'Dell'},{id: 3, text: 'Lee'}]}
})
这两段代码的区别是,用template
渲染的,最外层没有div
,而上面一段,最外层会有一个div
<div id="app"><template v-for="(item,index) of list" :key="item.id"><div>{{item.text}} ---- {{index}}</div><span>{{item.text}}</span></template>
</div>
let vm = new Vue({el: '#app',data: {list: [{id: 1, text: 'hello'},{id: 2, text: 'Dell'},{id: 3, text: 'Lee'}]}
})
对象中的set
方法
对象的循环和数组一样,可以通过改变引用方式,更新数据。
除了这种方式之外,那我们还有其他方法更新数据吗?
全局方法:Vue.set()
let vm = new Vue({el: '#app',data: {userInfo: {name: 'tiantain',age: 28,gender: 'male',salary: 'secrey'}}
})
Vue.set(vm.userInfo,'address','beijing') //通过 Vue 提供的 set 方法,可以实现,数据更新,页面更着更新。
除了直接改变数据的引用,还可以利用 Vue 提供的set
方法去改变数据
实例方法:vm.$set()
vm.$set(vm.userInfo,'address','beijing') //通过 Vue 提供的 set 方法,可以实现,数据更新,页面更着更新。
如果useriInfo
是个数组,也可以使用set
方法
全局方法:
let vm = new Vue({el: '#app',data: {userInfo: [1,2,3,4]}
})
Vue.set(vm.userInfo,2,44)
实例方法:
vm.$set(vm.userInfo,2,44)
Vue 中的列表渲染相关推荐
- vue实现商城列表渲染
需求: 利用vue实现商城列表渲染 所需数据如下: mockData: [{"id": 1,"img": "https://img13 ...
- vue中 给v-for渲染的元素动态添加移除类名
vue中 给v-for渲染的元素动态添加移除类名 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以直接 ...
- 如何实现vue中的列表动画,如何封装vue动画
文章目录 一.vue中的列表动画如何实现 列表动画原理: 二.vue中如何封装动画 第1个版本:css动画版 第2个版本: js动画版(推荐) 一.vue中的列表动画如何实现 举个例子: 列表动画原理 ...
- Vue之for列表渲染、methods事件和model表单绑定
2.4 for列表渲染 文档:https://cn.vuejs.org/v2/guide/list.html v-for指令可以绑定数组的数据来渲染一个项目列表 v-for指令需要使用item in ...
- Vue教程0207-Vue列表渲染
Vue列表渲染 1.指令v-for-遍历数组 2.指令v-for遍历对象中每个属性 3.指令v-for-数数 4.指令v-for-遍历对象数组 5.指令v-for使用要点 1.指令v-for-遍历数组 ...
- Vue核心技术-5,列表渲染指令 v-for
一,前言 目前对前期目录进行了简单的梳理,周末会找时间调一下顺序, 顺便再补充一下遗漏的知识点,让过度更加平缓一些, 例如前面没有说计算属性,但目前的列表渲染就要用到了...囧在对目录梳理的过程中,发 ...
- Vue中v-html无法渲染
vue 中v-html将原始html渲染为带样式的文本 最近在使用v-html去渲染富文本的时候发现,怎么都渲染不出. 后发现后端为了安全性考虑,将<".">" ...
- vue中展示列表,类似formatter方法及在vue中点击页面信息事件
后台返回文件路径及文件名,前端展示只需要展示文件名,在Easyui中使用formatter方法很轻松就实现了,在vue中,需要使用过滤方式: formatterfj方法为截取字符串返回文件名 该方法应 ...
- 在vue中如何高性能渲染十万条数据(虚拟列表)并且增加个搜索框可以搜索到这些数据
在工作中,有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况,对于此,我们称这种列表叫做长列表.比如,在一些外汇交易系统中,前端会实时的展示用户的持仓情况(收益.亏损.手数等),此时对于用户的 ...
最新文章
- 【c语言】蓝桥杯算法训练 sign函数
- systemd下supervisord服务开机自启动以及注意事项
- npm ERR! code ELIFECYCLE
- STM32F103 SPI 主机模式分析
- ViewRoot,DecorView,MeasureSpec和View的工作原理——Android开发艺术探索笔记
- 根文件系统构建(Yocto方式)
- 漫步最优化一——引言
- Javascript中document.execCommand()的用法
- PAT 1064 朋友数
- Tracepro 中LED光源模型建立(英文
- DiffMerge安装配置使用
- Windows 计算机的快捷键大全
- win10系统怎么去除桌面图标的小箭头
- 全家福缺一个人怎么P图上去-免费+效果好
- 201919102004张雪婷(在虚拟机中安装)
- SDN相关组织——ONF
- Cloud Foundry 运行bosh create-env时报错: TLS handshake timeout
- 数码宝贝 皇家骑士团(奥米加兽、金甲龙兽、红莲骑士兽、杜纳斯兽、剑皇兽、究极V龙兽、阿尔法兽、颅骨兽、八足马兽、芳香兽、艾可萨兽、顽固兽、杰斯兽)
- 【NOI2015】【BZOJ4199】品酒大会
- 低功耗蓝牙BLE之广播
热门文章
- java第三方包学习之jsoup
- 如今黑帽查找引擎优化的难点
- Nginx+DNS负载均衡实现
- [译].NET 4 中玩耍内存映射文件
- 在Scala IDEA for Eclipse或IDEA里程序编译实现与在Spark Shell下的对比(其实就是那么一回事)...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(45)-工作流设计-设计步骤
- SqlServer中decimal(numeric )、float 和 real 数据类型的区别[转]
- EF/SQL/新闻中分页应用
- VB 文件未找到: 'C:\WINDOWS\system32\ieframe.dll\1'--继续加载工程吗?
- 初始化参数之memory_target