精华内容
下载资源
问答
  • 首先我们会想着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页面有所差别,所以我直接用了最笨的方法进行匹配。

    展开全文
  • 首先我们会想着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

    展开全文
  • 首先我们会想着mounted或者created里面加入想要执行的方法,但是有的时候会遇到你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法匹配页面标签报错的情况。 解决思路: 1.通过子页面调用父...
  • 首先我们会想着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框架时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确数据,特别是获取列表高度时候,由于数据没有加载完,获取不到准确高度。...

    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}}
    ... new Vue({ el:'#demo', data:
    展开全文
  • 使用Vue框架时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确数据,特别是获取列表高度时候,由于数据没有加载完,获取不到准确高度。之前使用jquery时候,有ready可以...
  • 使用vue-cli开发项目时遇到过一个问题,要求是页面组件全部加载完成后再执行某个函数,给上代码参考,方法可能有点笨,好在实现了功能。 1、安装vuex npm install vuex --save 2、项目目录下找到store.js文件 ...
  • 一、分析原因: 我们需要先了解html加载顺序: 解析html结构 → 加载外部...如果把引入vue.jsscript放到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框架时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确数据,特别是获取列表高度时候,由于数据没有加载完,获取不到准确高度。之前使用jquery时候,有ready可以...
  • 使用vue.js框架时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关操作,如果只处理页面位置、宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到宽...
  • 覆盖层中盒子还是透明,就可以是父级盒子opacity搞错了 ...这句话意思其实就是因为找不到dom中一些元素,解决方案其实就是检查一下是否具有dom元素,或者是不是dom加载完成了之后就执行了。 ...
  • 使用vue.js框架时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关操作,如果只处理页面位置、宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到宽高不准确。...
  • 使用vue.js框架时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关操作,如果只处理页面位置、获取dom元素宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,会导致...
  • 8 个生命周期的执行点,从 new 创建 Vue 对象到对象销毁,其中 4 个基本,4 个特殊下图中,红色标注就是 8 个生命周期的执行点,前四个为基本,后四个为特殊四个基本执行点(数据加载):...
  • 此时还访问不到data中的属性以及methods中的属性和方法,可以当前生命周期创建一个loading事件,在页面加载完成之后将loading移除。 (2)创建完成:created(){} 当前生命周期执行的时候会遍历data中所有的属性,...
  • 原理:nextTick可以在下一次更新dom之后进行回调,我问题在于,在页面加载完成时无法获取虚拟dom,而使用回调函数后就可以获取到正确dom数量,所以只需要nextTick函数中执行jq函数就可以正确获取了。...
  • 页面加载完成后只执行一次设置函数。 (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 里面无法得到所需要高度,永远偏...
  • 原理: nextTick可以在下一次更新dom之后进行回调,我问题在于,在页面加载完成时无法获取虚拟dom,而使用回调函数后就可以获取到正确dom数量,所以只需要nextTick函数中执行jq函数就可以正确获取了。...
  • Vue项目完成后,根目录下打开命令行,输入命令: npm run build 实际上此命令就是执行build.js文件,将项目打包成静态资源。 此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有: static文件下...
  • Vue项目完成后,根目录下打开命令行,输入命令: npm run build 实际上此命令就是执行build.js文件,将项目打包成静态资源。 此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有: static文件下...
  • vue :调用子组件出现的问题1: ...这里做初始化后就立马执行了下一句调用子组件的方法,可能他还没有初始化完成,所以出现了undefined的异常, 所以这里调用子组件方法时,我稍作了一下延时处理: .
  • Vue+echart折线图和柱状图

    千次阅读 2018-11-14 22:05:31
    执行 npm i echarts -s 命令 在页面中 导入 import echarts from 'echarts'; 数据格式   ...把数据赋值到图表上,后调用一次图表...由于数据是异步加载的,图表完成加载时,数据还没完全渲染完页面。   ...
  • 无法直接操作vuex的方法,这个时候如果没有 event-bus 就很难操作。 所以通常 event-bus 我们都会用表现层下面的其他层级(没有vue实例)之间通信,而且必须要很清楚自己做什么 <p>...
  • 前端基础知识

    2021-01-09 22:16:36
    当数据发生变化页面dom熏染不出来时可以使用,这个意思是在页面渲染完成执行。 2.当一个页面需要渲染数据太多,处理不过来怎么解决 分页=》懒加载=》新线程 3.请介绍一下cache-control 每一个资源都可以通过...
  • 2019 与我技术之路

    2020-12-09 05:17:58
    2. H5 端无法传入回调函数来接收 Native 的方法执行结果。于是乎我准备突破一个纯前端开发的定位,开始涉足 Native, 当然主要是 Native 和 Web 融合的部分。 第一步就是开始研究 H5 和 Native 通信桥梁...
  • 前一种方式花裤衩同学的vue-element-admin中有具体实现,项目主页:https://github.com/PanJiaChen/vue-element-admin 他是先将element自己提供变量文件修改后生成新css,然后将该css用...

空空如也

空空如也

1 2 3
收藏数 59
精华内容 23
关键字:

vue页面加载完成在执行的方法

vue 订阅