首页 > 其他分享 >Vue.nextTick在动态更新iframe的src中的使用

Vue.nextTick在动态更新iframe的src中的使用

时间:2024-01-11 15:59:55浏览次数:35  
标签:nextTick src Vue 函数 DOM iframe

Vue.nextTick在动态更新iframe的src中的使用:https://codeleading.com/article/63673310260/

 

当iframe中的地址src需要动态改变时,需要使用Vue.nextTick来切换地址src,否则DOM的地址不会实现更新,而是保持上一次的src。

在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。在Vue的生命周期created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的ts代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作才不会有问题 。

  1.   Vue.nextTick(()=>{
  2.   this.ifamSrc=document.getElementById("iframId"); //通过ID获取iframe对象
  3.   this.ifamSrc.removeAttribute("src"); //先移除上一次的src地址
  4.   this.ifamSrc.setAttribute("src","xxx"); //更新当前地址
  5.   })

 

标签:nextTick,src,Vue,函数,DOM,iframe
From: https://www.cnblogs.com/bydzhangxiaowei/p/17958725

相关文章

  • vue入门——???06days
    案例回顾:点击显示小电影案例-按钮点击事件-axios.get().then(res=>{res.data#响应体的内容})-v-for循环---》div#2计算属性-必须要有返回值,返回值当做属性的值-方法当属性用-computed中-它依赖的变量发生变......
  • vue 高德地图异步引用
    先建立一个文件,引入高德  gDMapLoader.jsconstak='4e9f15de14b05fd8f19e1d8fbe91f0a3'exportdefaultfunctionload(){returnnewPromise(function(resolve,reject){if(window.AMap){resolve(window.AMap)}else{varscript=doc......
  • Vue2 使用 Knova Canvas 合成图片、多个视频、音频在一个画面中并播放,自定义 video co
    本文转载https://blog.csdn.net/RosaChampagne/article/details/128020428?spm=1001.2014.3001.5502的文章安装插件npminstallvue-konva@2konva--save在main.js中使用importVuefrom'vue';importVueKonvafrom'vue-konva';Vue.use(VueKonva);相关实现代......
  • Vue-Router: 如何在Vue应用程序中使用编程式导航?
    Laravel是一个流行的PHP框架,它具有出色的可测试性,可以帮助开发人员在更短的时间内编写可靠的代码。但是,即使使用了这个框架,也可能会出现测试覆盖率较低的情况。测试覆盖率是指代码中已由测试案例覆盖的部分比例。测试覆盖率越高,代码质量越高。在本文中,我们将分享几种技巧,帮助您提......
  • Vue(三)基础继续补充
    插件:新建一个pluginsindex.jsimportVuefrom'vue'exportdefault{install(a){console.log(a)//自定义一个,加入混入Vue.mixin({methods:{handleShowName(){alert(this.name)......
  • 创建一个vue项目全过程
    1.安装node环境,cmd检查node是否安装成功命令:node-v2.安装vue.js,命令:npminstall-gvue(默认安装的是vue3)3.安装webpack模块,命令:npminstallwebpack-g4.安装webpack脚手架,命令:npminstall--globalwebpack-cli5.全局安装vue-cli,命令:npminstall-globalvue-cli(安装的是vu......
  • vue入门-???? 05days
    购物车案例回顾:-v-for循环商品-checkbox多选:数组,input--->checkbox--->value 对象  [在input中只能使用v-model]getprice()---->方法------>变量发生变化,这个会重新运算加全选与全不选-chekbox--->单独的------>布尔类型-checkbox的cha......
  • 使用Nginx部署VUE3+VITE项目时无法访问后端接口的一个情况
    在使用VUE3作为前端,ABPVNEXT6.0作为后端框架。使用Nginx部署后无法访问api,接口报错404找错思路很重要,网上找到了很多Nginx配置信息,但是都不起作用,即使更换服务器重新部署也无法生效后来才发现,ABPNEXT对于未找到对应实体的报错就是404,按照正常的程序逻辑,404应该就是notfound,这一......
  • netcore webpi 通过signalr 给vue项目推送消息
     最近项目上需要做个服务给前端推消息,首先就想到了signalr,关于signalr详情可以参考微软官方文档(ASP.NETCoreSignalR概述|MicrosoftLearn),微软现在也有使用教程(ASP.NETCoreSignalR入门|MicrosoftLearn)微软教程是通过使用库管理器(LibMan)从unpkg 获取客户端库,如......
  • vue3利用qrcode.vue并通过canvas合并图片
    <template><canvasid="canvas"width="300"height="400"></canvas><el-buttonstyle="margin-top:20px"type="danger"plain@click="downloadCode"......