Vue数据产生变化需要页面渲染完之后执行某操作
1.数据产生变化或者页面需要vue数据渲染完之后加载的东西
Vue.nextTick(function () {
alert(123);
});
2 调用vue方法
--------------Vue中添加方法 /**
* 将页面时间绑定类型格式化
* fmt 格式: 'yyyy-MM-dd hh:mm:ss';
*/
Vue.filter('dataFormat', function (value,fmt) {
var getDate = new Date(value);
var o = {
'M+': getDate.getMonth() + 1,
'd+': getDate.getDate(),
'h+': getDate.getHours(),
'm+': getDate.getMinutes(),
's+': getDate.getSeconds(),
'q+': Math.floor((getDate.getMonth() + 3) / 3),
'S': getDate.getMilliseconds()
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for (var k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
}
}
return fmt;
}); var vm = new Vue({
el:'#app',
data:{
date:new Date();
},
methods:{
aaa:function(){
//调用方法
vm.$options.filters['dataFormat'](vm.date,'yyyyMM');
}
}
}) 或者页面中调用Vue方法 <p>{{date | dataFormat('yyyyMM')}}</p>
Vue数据产生变化需要页面渲染完之后执行某操作的更多相关文章
- vue中数据接收成功,页面渲染失败
1.vue中数据接收成功,页面渲染失败.代码如下 经过查找资料修改代码为 或是 原因是: 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如: ...
- vue 路由参数变化,页面不更新的问题
监控$route 在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,如果不监听路由参数值的变化,页面无数据刷新,需手动刷新浏览器,这样做就不是我们的预期效果. 举例:当前路由为 /p ...
- vue中在页面渲染完之后获取元素(否则动态渲染的元素获取不到)
两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...
- 组件内或者vuex数据已变化但是页面显示或许不正常
一.问题产生背景: 组件内的数据比较复杂,涉及多层次的数组和对象的情况下,某些值发生变化但是页面值没有变化:更新vuex的数据,同样在涉及多层次的数组和对象的情况下,某些值发生变化但是页面值没有变化: ...
- spring boot容器加载完后执行特定操作
有时候我们需要在spring boot容器启动并加载完后,开一些线程或者一些程序来干某些事情.这时候我们需要配置ContextRefreshedEvent事件来实现我们要做的事情 1.Applicat ...
- angular指令监听ng-repeat渲染完成后执行自定义事件方法
今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露 ...
- 多进程浏览器、多线程页面渲染与js的单线程
线程与进程 说到单线程,就得从操作系统进程开始说起.在早期的操作系统中并没有线程的概念,进程是能拥有资源和独立运行的最小单位,也是程序执行的最小单位.任务调度采用的是时间片轮转的抢占式调度方式,而进程 ...
- 8种Vue中数据更新了但页面没有更新的情况
目录 1.Vue 无法检测实例被创建时不存在于 data 中的 属性 2. Vue 无法检测'对象属性'的添加或移除 3.Vue 不能检测利用数组索引直接修改一个数组项 4.Vue 不能监测直接修改数 ...
- JS基础——浅谈前端页面渲染和性能优化
加载html中的静态资源 其中,加载静态资源的过程,一般为浏览器根据DNS服务器得到域名的IP地址,然后向这个IP的机器发送http请求,服务器收到.处理并返回http请求,浏览器得到返回http请求 ...
随机推荐
- jvm字节码和类加载机制
Class类文件的结构 任何一个Class文件都对应着唯一一个类或接口的定义信息,但反过来说,类或接口并不一定都得定义在文件里(类和接口也可以用反射的方式通过类加载器直接生成) Class文件时一组以 ...
- sql多列排序
从左到右依次排列,如果出现重复值,则按照右侧的排序规则进行排序: 例如:分数倒序排序,但是遇到重复值,则再按照class_id倒序排 例如:分数倒序排序,没有重复值,进行了正常的排序,则不再按照cla ...
- 关于WebServices的调用
1.使用soapui测试接口是否能通 具体操作步骤请查看:https://www.cnblogs.com/BINDAI/p/13201513.html Soapui请求结果集 2.获得soapu ...
- 移动端web app要使用rem实现自适应布局:font-size的响应式
关于webAPP的开发最主要解决的就是“自适应自适应布局”.常规的适配有很多做法,例如:流式布局.限死宽度等,但是这些方案都不是最佳的解决方法,而最满足设计需要的是: 元素可以根据屏幕大小而等比列变 ...
- 1. 初识Jackson -- 世界上最好的JSON库
要想人前显贵,必须背后受罪.关注公众号[BAT的乌托邦]开启专栏式学习,拒绝浅尝辄止.本文 https://www.yourbatman.cn 已收录,里面一并有Spring技术栈.MyBatis.中 ...
- Layui文本框限制正整数
<input type="text" name="Number" lay-verify="required|integer" plac ...
- postman设置页面详解
设置详解/General Trim keys and values in request body:如果使用form-data或者url-encoded的方式向服务器发送数据:将该选项设置为ON,则会 ...
- postman做自动化测试1——collection runner
一.添加collection 打开postman,点击“collection”页签,点击collection下面的添加按钮. 弹出 新建面板,输入名称和描述,点击“creat”按钮,新建成功 3 点击 ...
- day68 form组件
目录 一.自定义分页器的拷贝和使用 二.Forms组件 1 前戏 2 form组件的基本功能 3 基本使用 4 基本方法 5 渲染标签 6 展示提示信息 7 钩子函数(HOOK) 8 forms组件其 ...
- Let's GO(一)
近来开始学Go,留此博客以记录学习过程,顺便鞭策自己更加努力. 人生苦短,Let's GO! Let's GO(一) Let's GO(二) Let's GO(三) Let's GO(四) 简单介绍 ...