位置: 编程技术 - 正文

使用vue的v-for生成table并给table加上序号的实例代码(vue中使用foreach)

编辑:rootadmin

推荐整理分享使用vue的v-for生成table并给table加上序号的实例代码(vue中使用foreach),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3 v-for,vue中的v-for,vue3 v-for,vue中使用foreach,vue v for key,vue中使用foreach,vue v-for ref,vue中的v-for怎么使用,内容如对您有帮助,希望把文章链接给更多的朋友!

现在有一个使用mybatis的分页插件生成的table,table中数据是通过vue获得的 , 前台显示使用<tr v-for="item in items">

后台vue获取数据使用分页插件进行查询然后使用回调,将结果返回给vue的一个model

需求是:给生成的table添加序号

刚开始使用js的函数

将上面的方法放在点击生成table的事件上 , 可以显示序号,接着点击分页的下一页或者页数,跳转到下一页的时候,序号消失了,

很自然的想到在点击下一页后也应该有添加序号的操作,于是找到显示下一页数据的方法,加上上面的js方法,结果没有生效,

个人觉得是查出数据后rownum方法在dom没刷新前进行了添加,然后dom更新后,序号消失了

通过查找资料最终像下面这样使用解决了问题 , 在每个出现分页查询的地方都加上 Vue.nextTick(function(){})方法

一、vm.$nextTick( [callback] )

二、Vue.nextTick( [callback, context] )

三、异步更新队列

使用vue的v-for生成table并给table加上序号的实例代码(vue中使用foreach)

实例

或者

什么时候需要用的Vue.nextTick()

你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。

在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。

Vue是异步执行dom更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时,Vue会清空队列,并进行必要的DOM更新。

当你设置

并不会马上更新,而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM

状态去做某些事情,就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用

Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

总结:

* `Vue.nextTick(callback)`,当数据发生变化,更新后执行回调。* `Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。

以上所述是小编给大家介绍的使用vue的v-for生成table并给table加上序号,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

初学者AngularJS的环境搭建过程 AngularJS是什么AngularJS是一个开源Web应用程序框架。它最初是由MISKOHevery和AdamAbrons于年开发。现在是由谷歌维护AngularJS特性AngularJS是一个功能强大的基

vue2里面ref的具体使用方法 本文介绍了vue2里面ref的具体使用方法,分享给大家,具体如下。1、我们先定义两个组件html部分divid="app"navbar/navbarpagefooter/pagefooter/divjs部分Vue.component('na

Vue-resource拦截器判断token失效跳转的实例 在拦截器中设置全局的token判断,意味着每次http请求都会校验token,与后台约定好的token过期返回码可以自定义跳转路径;vartoken=window.localStorage.getItem("to

标签: vue中使用foreach

本文链接地址:https://www.jiuchutong.com/biancheng/373334.html 转载请保留说明!

上一篇:vue中的event bus非父子组件通信解析(vue eventhub)

下一篇:初学者AngularJS的环境搭建过程(angularjs4)

  • 外国常驻代表机构办理税务登记
  • 预计产品质量保证损失是什么意思
  • 收取职工工会会费收据
  • 独立核算和非独立核算由谁定
  • 发票右上角打印缺数字
  • 个体工商户增值税申报操作流程
  • 贷款利息怎么算的
  • 红字发票信息表需要盖章吗
  • 福利企业发放职工集资利息是不是要交个人所得税
  • 会计法对填制审核会计凭证有哪些规定
  • 营改增是初次分配还是再分配
  • 专利技术转让使用费如何做会计处理?
  • 月末在产品和产成品计算
  • 冲减预提费用
  • 自己开发app能享受医保吗
  • 股东转账实收资本怎么填
  • 预收房款如何申报缴纳增值税
  • 建筑企业成本票是含税价还是不含税价
  • 什么是遗产税什么是税
  • 纳税义务发生时间和纳税期限的关系
  • 水利工程建设费用组成
  • 未计提工资
  • 开票金额开多了,对公司有影响吗
  • 企业筹办期多久
  • 未确认收货可以评价吗
  • 多交的增值税附加税怎么做账
  • 基建项目类型填什么
  • 费用怎么冲销
  • 文件改后缀什么意思
  • launcher.exe是什么,每次开机都是否需要进行更改
  • 项目提成比例
  • PHP:mcrypt_module_close()的用法_Mcrypt函数
  • java 调用go
  • 差额征税七种业务是什么
  • 基于改进yolov4论文
  • 会计等式反映了六大会计要素的恒等关系
  • 云E办接口文档
  • lnewusers命令 创建用户账号
  • 帝国cms建站实例教程
  • 企业管理咨询合作协议
  • 对公账户每笔钱都得做账吗
  • 个人所得税汇算清缴时间
  • 循环表是线性表吗
  • wordpress批量生成文章
  • 销售价格含税的会计分录
  • 暂缓收缴工会经费申请
  • 公司帮员工全额买社保该怎么入账?
  • 新办公司实收资本怎么算
  • 对公账户收到钱都要开票吗
  • 服务不动产和无形资产本期数,第19栏
  • 付出对价的公允
  • 银行承兑汇票贴现的账务处理
  • 债权投资相关科目
  • 高新企业预缴增值税税率
  • 委托收款背书和质押背书都属于转让背书
  • 股权支付会计处理
  • 客户赔偿款计入成本吗
  • 会计核算健全的单位 可以选择小规模纳税的有
  • 服务外包离岸业务是什么
  • mysql 备份和恢复
  • 其他操作系统类型
  • win10应用商店应用少
  • 正版vista一键升级win7
  • ubuntu和windows文件互传
  • xp如何更新
  • linux命令行在哪
  • 通过node-mysql搭建Windows+Node.js+MySQL环境的教程
  • ini文件编辑
  • CSS锦囊
  • vue cli mock
  • vim tagbar
  • unity怎么把文件导入项目
  • 安卓手机管家是什么
  • 超详细的卡拉赞攻略
  • Javascript中Array.prototype.map()详解
  • 四川省 税务局
  • 增值税普通电子发票有什么用
  • 国家税务总局税法
  • 蓬莱市税务局
  • 本期应纳的增值税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设