位置: 编程技术 - 正文

使用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)

  • 劳务费个人所得税税率表2023最新
  • 纳税人进口货物应当自海关填发税款
  • 合并报表逆流抵消
  • 银行结息计入什么费用
  • 个税申报截止日期2023年8月
  • 建筑工程查帐征收税
  • 通过应交税费核算的
  • 库存商品对外销售会计分录
  • 报废车辆残值收入交多少增值税
  • 个人所得税申报成功,会显示什么?
  • 关联企业如何取消
  • 公司注销固定资产交什么税
  • 零退税率可以做免税吗
  • 如何才能成为一个好老师
  • 卖桶装水税率
  • 增值税发票不见了可以重开吗
  • 公司的差旅费
  • 国际货运运费的计算基础
  • windows10如何卸载edge
  • windows11我的电脑怎么放到桌面
  • 存货计划成本法好处
  • 支付劳保用品会计怎么做
  • 总分类账和明细账
  • 企业所得税年报申报时间
  • 会计新准则讲解
  • 广告公司的材料的作用有哪些
  • 退货会计应该怎么做账
  • 大金中央空调面板图解
  • 单反镜头直径越大是不是就越好
  • 补收入的会计分录
  • LIO-SAM学习与运行测试数据集
  • 送货上门需要其他费用吗
  • 出让土地使用权和转让土地使用权的区别
  • php图片加水印实例分析
  • 无人驾驶基础知识
  • 出租车计入什么费
  • 5 分钟速通 SVG
  • php首页
  • access数据库干嘛的
  • 摊余成本和账面价值
  • 财务应付
  • 房地产个税是什么意思
  • 小企业会计准则适用于哪些企业
  • 需要什么证件和材料
  • 收到法人投资款需要什么手续
  • 国债利息收入的分录
  • 营改增清包工
  • 行政单位汽车加油无明细怎么办
  • 不得抵扣增值税的情形
  • 母子公司之间的借款
  • 企业缴纳车船税吗
  • 社会保险费结算表怎么打印
  • 车费报销记入哪个账户
  • 生产经营收入总额填什么金额
  • 市场营销策划开票品目
  • 带折扣的发票如何开具
  • 本期应征增值税销售额是什么意思
  • 咨询服务费如何合理避税
  • 明细账的作用
  • mysql 5.7.33安装
  • mysql5.7安装版下载
  • windows更改图标大小
  • windows优化软件哪个好
  • windows2003怎么升级
  • windows2008防火墙允许远程桌面
  • 一键ghost U盘版
  • 彻底删除ubuntu系统
  • win10增加右键菜单
  • randomdigits.exe - randomdigits是什么进程 有什么用
  • linux yum安装apache
  • macbook怎么新建txt文件
  • win7系统运行红警黑屏有声音
  • 编写一个bash脚本程序,用for循环实现
  • 命令适用于
  • 三消游戏在线
  • css 相对定位
  • javascript常用函数大全
  • pdb settrace
  • 国家税务总局12366上海(国际)纳税服务中心
  • 电子税务局存款账户备案
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设