-
Vue.js 关于页面加载完成后执行一个方法的问题
2018-10-13 20:34:12首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况。 解决思路: 1.通过子页面调用...首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况。
解决思路:
1.通过子页面调用父页面的方法,因为在子页面开始渲染的时候,你的父页面肯定是已经渲染好了的,前提这里的方法中是去找寻父页面的标签。
2.直接在本页面监视一个参数,发现参数被初始化了,说明页面也已经加载完成,因为你的页面用到了这个参数。
方法1案例:tab页里的子页面如果没有内容就隐藏
父页面代码
<el-tabs v-model="initTab" type="card"> <el-tab-pane label="1信息" name="tab1"> 1 </el-tab-pane> <el-tab-pane label="2报告" name="tab2"> 2 </el-tab-pane> <el-tab-pane label="3信息" name="tab3"> 3 </el-tab-pane> <el-tab-pane label="4信息" name="tab4"> <ziyemian-group @tabShow="tabShow" title="4信息" v-if="detailInfo"> </ziyemian-group> </el-tab-pane> <el-tab-pane label="5信息" name="tab5"> 5 </el-tab-pane> <el-tab-pane label="其它信息" name="tab6"> 6 </el-tab-pane> </el-tabs> import ZiyemianGroup from './ZiyemianGroup.vue' components: { ZiyemianGroup }, data () { return { detailInfo: {}, initTab:‘tab1’ } } methods: { tabShow: (data) => { document.getElementsByClassName('el-tabs__item').item(4).style.display = data }, }
然后是ZiyemianGroup.vue的代码,这里主要就是方法调用,页面自己搞定
data () { return { list: [] } }, mounted () { this.init() }, methods: { init() { if (list.length > 0) { this.$emit('tabShow', 'inline') } else { this.$emit('tabShow', 'none') } ) }
list是子页面的内容,这样如果子页面没有内容就可以隐藏掉了
方法2案例:我这边需要tab页隐藏
<el-tabs v-model="initTab" type="card"> <el-tab-pane label="1信息" name="tab1"> 1 </el-tab-pane> <el-tab-pane label="2报告" name="tab2"> 2 </el-tab-pane> <el-tab-pane label="3信息" name="tab3"> 3 </el-tab-pane> <el-tab-pane label="4信息" name="tab4"> <ziyemian-group title="4信息" v-if="detailInfo"> </ziyemian-group> </el-tab-pane> <el-tab-pane label="5信息" name="tab5"> 5 </el-tab-pane> <el-tab-pane label="其它信息" name="tab6"> 6 </el-tab-pane> </el-tabs> import ZiyemianGroup from './ZiyemianGroup.vue' components: { ZiyemianGroup }, data () { return { detailInfo: {}, initTab:‘tab1’ } } watch: { detailInfo: function () { this.$nextTick(function () { this.tabShow() }) } }, methods: { tabShow () { document.getElementsByClassName('el-tabs__item').item(6).style.display = 'none' // 隐藏tab6 } }
nextTick方法,意思是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
隐藏tab的方法我用了原生js,因为vue生成后的页面和写的vue页面有所差别,所以我直接用了最笨的方法进行匹配。
-
dom vue 加载完 执行_浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2020-12-20 22:01:56首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况。解决思路:1.通过子页面调用父...首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况。
解决思路:
1.通过子页面调用父页面的方法,因为在子页面开始渲染的时候,你的父页面肯定是已经渲染好了的,前提这里的方法中是去找寻父页面的标签。
2.直接在本页面监视一个参数,发现参数被初始化了,说明页面也已经加载完成,因为你的页面用到了这个参数。
方法1案例:tab页里的子页面如果没有内容就隐藏
父页面代码
1
2
3
5
6
import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
ZiyemianGroup
},
data () {
return {
detailInfo: {},
initTab:‘tab1'
}
}
methods: {
tabShow: (data) => {
document.getElementsByClassName('el-tabs__item').item(4).style.display = data
},
}
然后是ZiyemianGroup.vue的代码,这里主要就是方法调用,页面自己搞定
data () {
return {
list: []
}
},
mounted () {
this.init()
},
methods: {
init() {
if (list.length > 0) {
this.$emit('whiteShow', 'inline')
} else {
this.$emit('whiteShow', 'none')
}
)
}
list是子页面的内容,这样如果子页面没有内容就可以隐藏掉了
方法2案例:我这边需要tab页隐藏
1
2
3
5
6
import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
ZiyemianGroup
},
data () {
return {
detailInfo: {},
initTab:‘tab1'
}
}
watch: {
detailInfo: function () {
this.$nextTick(function () {
this.tabShow()
})
}
},
methods: {
tabShow () {
document.getElementsByClassName('el-tabs__item').item(6).style.display = 'none' // 隐藏tab6
}
}
nextTick方法,意思是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
隐藏tab的方法我用了原生js,因为vue生成后的页面和写的vue页面有所差别,所以我直接用了最笨的方法进行匹配。
以上所述是小编给大家介绍的Vue.js 关于页面加载完成后执行一个方法的问题详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
时间: 2019-03-30
-
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2020-12-29 07:44:09首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况。 解决思路: 1.通过子页面调用父... -
dom加载完再执行 vue_浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2020-12-19 04:11:31首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况。解决思路:1.通过子页面调用父...首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况。
解决思路:
1.通过子页面调用父页面的方法,因为在子页面开始渲染的时候,你的父页面肯定是已经渲染好了的,前提这里的方法中是去找寻父页面的标签。
2.直接在本页面监视一个参数,发现参数被初始化了,说明页面也已经加载完成,因为你的页面用到了这个参数。
方法1案例:tab页里的子页面如果没有内容就隐藏
父页面代码
1
2
3
5
6
import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
ZiyemianGroup
},
data () {
return {
detailInfo: {},
initTab:‘tab1'
}
}
methods: {
tabShow: (data) => {
document.getElementsByClassName('el-tabs__item').item(4).style.display = data
},
}
然后是ZiyemianGroup.vue的代码,这里主要就是方法调用,页面自己搞定
data () {
return {
list: []
}
},
mounted () {
this.init()
},
methods: {
init() {
if (list.length > 0) {
this.$emit('whiteShow', 'inline')
} else {
this.$emit('whiteShow', 'none')
}
)
}
list是子页面的内容,这样如果子页面没有内容就可以隐藏掉了
方法2案例:我这边需要tab页隐藏
1
2
3
5
6
import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
ZiyemianGroup
},
data () {
return {
detailInfo: {},
initTab:‘tab1'
}
}
watch: {
detailInfo: function () {
this.$nextTick(function () {
this.tabShow()
})
}
},
methods: {
tabShow () {
document.getElementsByClassName('el-tabs__item').item(6).style.display = 'none' // 隐藏tab6
}
}
nextTick方法,意思是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
隐藏tab的方法我用了原生js,因为vue生成后的页面和写的vue页面有所差别,所以我直接用了最笨的方法进行匹配。
以上所述是小编给大家介绍的Vue.js 关于页面加载完成后执行一个方法的问题详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
-
vue请求数据完成后执行_Vue在页面数据渲染完成之后的调用方法
2020-12-23 08:15:35Vue在页面数据渲染完成之后的调用方法在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度。...... new Vue({ el:'#demo', data:Vue在页面数据渲染完成之后的调用方法
在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度。之前在使用jquery的时候,有ready可以帮助我们实现,但是Vue不存在此类方法,我们需要结合watch和this.$nextTick()来实现。
nextTick:在下次 DOM 更新循环结束之后执行延迟回调。
watch:用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。
之前我是这样子使用nextTick的:
mounted:{
this.$nextTick(function(){
/方法
})
}
经测试发现实现不了所需要的效果,只有结构,没有数据,即获取不到想要的高度
后发现需要结合watch监听某个属性:
watch:{
asyncArray:function()
this.$nextTick(function(){
//方法
});
}
}
经测试可用!
以上这篇Vue在页面数据渲染完成之后的调用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
时间: 2018-09-09
最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级
vue里面本身带有两个回调函数: 一个是`Vue.nextTick(callback)`,当数据发生变化,更新后执行回调. 另一个是`Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调. 栗子: ...
- {{item}}
-
Vue在页面数据渲染完成之后的调用方法
2020-12-09 02:56:47在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度。之前在使用jquery的时候,有ready可以... -
vue-cli监听组件加载完成的方法
2020-12-12 14:15:20在使用vue-cli开发项目时遇到过一个问题,要求是页面组件全部加载完成后再执行某个函数,给上代码参考,方法可能有点笨,好在实现了功能。 1、安装vuex npm install vuex --save 2、在项目目录下找到store.js文件 ... -
vue.js数据加载完成前显示原代码{{代码}}的解决方法
2020-09-17 14:41:27一、分析原因: 我们需要先了解html的加载顺序: 解析html结构 → 加载外部...如果把引入vue.js的script放到head里面,那页面不会出现{{代码}},因为在body之前就把vue引入进来了,vue加载完成了。 二、解决方法: . -
Vue在页面数据渲染完成之后调用
2018-02-08 18:03:53在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度。之前在使用jquery的时候,有ready可以... -
vue数据页面渲染完成以后操作DOM
2020-10-30 13:56:29在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度。 nextTick:在下次 DOM 更新循环结束... -
[转]Vue在页面数据渲染完成之后调用(转载请删除括号里的内容)
2020-07-07 17:44:29在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度。之前在使用jquery的时候,有ready可以... -
vue中通过js控制页面样式方法
2019-10-27 20:01:38在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置、宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽... -
覆盖层弹窗问题 一些报错的原因一定是代码写错了 如何在多页面中使用 vue和vant 使用aixos cdn引入方法 ...
2020-08-08 08:42:04在覆盖层中的盒子还是透明,就可以是父级盒子的opacity搞错了 ...这句话的意思其实就是因为找不到dom中的一些元素,解决方案其实就是检查一下是否具有dom元素,或者是不是在dom加载完成了之后就执行了。 ... -
如何在vue.js渲染完界面之后再调用函数
2019-03-21 10:30:40在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置、宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不准确。... -
如何在vue.js渲染完界面之后调用函数
2019-08-09 10:16:02在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置、获取dom元素的宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,会导致... -
vuejs页面跳转_【Vue 学习】 VueJS 生命周期
2021-01-26 10:20:478 个生命周期的执行点,从 new 创建 Vue 对象到对象的销毁,其中 4 个基本的,4 个特殊的,在下图中,红色标注的就是 8 个生命周期的执行点,前四个为基本的,后四个为特殊的四个基本执行点(数据加载):... -
vue的生命周期及使用场景
2020-11-06 10:28:28此时还访问不到data中的属性以及methods中的属性和方法,可以在当前生命周期创建一个loading事件,在页面加载完成之后将loading移除。 (2)创建完成:created(){} 当前生命周期执行的时候会遍历data中所有的属性,... -
解决vue中虚拟dom,无法实时更新的问题
2021-01-21 13:07:58原理:nextTick可以在下一次更新dom之后进行回调,我的问题在于,在页面加载完成时无法获取虚拟dom,而使用回调函数后就可以获取到正确的dom数量,所以只需要在nextTick函数中执行jq函数就可以正确获取了。... -
从Vue源码中我学到了几点精妙方法
2020-12-31 23:21:33页面加载完成后只执行一次的设置函数。 (function (a, b) { console.log(a, b); // 1,2 })(1, 2); 通常,全局变量被作为一个参数传递给立即执行参数,这样它在函数内部不使用window也可以被访问到。 (function ... -
vue 获取实际dom 的高度 this.$nextTick()
2018-11-07 16:46:13前言:利用vue 写的项目,由于用了iframe 的原因,子页面的内容会随着数据的不同而不同,所以iframe 的高度需要等页面数据加载完后动态计算。 经过自己各种的调试,发现在mounted 里面无法得到所需要的高度,永远偏... -
vue中虚拟dom,无法实时更新的解决方案
2017-09-28 13:47:13原理: nextTick可以在下一次更新dom之后进行回调,我的问题在于,在页面加载完成时无法获取虚拟dom,而使用回调函数后就可以获取到正确的dom数量,所以只需要在nextTick函数中执行jq函数就可以正确获取了。... -
vue项目打包-上传GitHub预览
2020-12-05 10:58:37当Vue项目完成后,在根目录下打开命令行,输入命令: npm run build 实际上此命令就是执行build.js文件,将项目打包成静态资源。 此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有: static文件下... -
vue项目打包上传github并制作预览链接(pages)
2020-12-03 14:21:16当Vue项目完成后,在根目录下打开命令行,输入命令: npm run build 实际上此命令就是执行build.js文件,将项目打包成静态资源。 此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有: static文件下... -
vue 解决:Error in v-on handler: “TypeError: Cannot read property ‘compareTo‘ of undefined
2020-07-29 20:41:54vue :调用子组件出现的问题1: ...在这里做初始化后就立马执行了下一句调用子组件的方法,可能他还没有初始化完成,所以出现了undefined的异常, 所以在这里调用子组件方法时,我稍作了一下延时处理: . -
Vue+echart折线图和柱状图
2018-11-14 22:05:31先执行 npm i echarts -s 命令 在页面中 导入 import echarts from 'echarts'; 数据格式 ...把数据赋值到图表上,后在调用一次图表...由于数据是异步加载的,图表完成加载时,数据还没完全渲染完页面。 ... -
Vue 项目架构设计与工程化实践
2021-01-08 14:30:50无法直接操作vuex的方法,这个时候如果没有 event-bus 就很难操作。 所以通常 event-bus 我们都会用在表现层下面的其他层级(没有vue实例)之间通信,而且必须要很清楚自己在做什么 <p>... -
前端基础知识
2021-01-09 22:16:36当数据发生变化页面dom熏染不出来时可以使用,这个的意思是在页面渲染完成后执行。 2.当一个页面需要渲染的数据太多,处理不过来怎么解决 分页=》懒加载=》新线程 3.请介绍一下cache-control 每一个资源都可以通过... -
2019 与我的技术之路
2020-12-09 05:17:582. H5 端无法传入回调函数来接收 Native 的方法执行结果。于是乎我准备突破一个纯前端开发的定位,开始涉足 Native, 当然主要是 Native 和 Web 融合的部分。 第一步就是开始研究 H5 和 Native 通信桥梁... -
欢迎讨论更加优雅的主题切换方式
2020-11-21 19:39:22前一种方式在花裤衩同学的vue-element-admin中有具体的实现,项目主页:https://github.com/PanJiaChen/vue-element-admin 他是先将element自己提供的变量文件修改后生成新的css,然后将该css用...
-
java将数据缓存到文件流_java缓冲流;对象流 ; 文件流;数组流;数据流;转换流;打印流;Properties类的使用...
-
vue3从0到1-超详细
-
华西村关系图.jpeg
-
FT2232D_I2cTool.zip
-
Micrium-uC-Probe-Setup-Release-4.8.2.0
-
数据结构约瑟夫.cpp
-
电商广告投放明细_红孩子.xls
-
React antdesign 修改表格Tbale的样式
-
【爱码农】C#制作MDI文本编辑器
-
零基础极简以太坊智能合约开发环境搭建并开发部署
-
Amoeba 实现 MySQL 高可用、负载均衡和读写分离
-
MHA 高可用 MySQL 架构与 Altas 读写分离
-
用微服务spring cloud架构打造物联网云平台
-
IT6302-UM-CN-231636.pdf
-
java 播放声音_如何用Java播放声音?
-
QGTKJson数据,解析直接可用
-
阶段一Python核心编程:走进Python编程的世界00
-
IT6300B-UM-CN-231551.pdf
-
前端Vue示例代码.zip
-
IT6322-UM-CN-222356.pdf