首页 > 其他分享 >动态添加页面

动态添加页面

时间:2024-08-12 15:19:56浏览次数:15  
标签:俄乌 question qbzhAgentTableInstance parentDiv 添加 var 动态 页面

方式一:



  <div><span class="smartText2" style="margin-top: 60px;" @click="handleTips('近期俄乌事件的态势分析')">近期俄乌事件的态势分析</span></div>
                        <div><span class="smartText2" @click="handleTips('俄乌时间时间线分析')">俄乌时间时间线分析</span></div>
                        <!-- <div><span class="smartText2" @click="handleTips('近期俄乌武器装备对比')">近期俄乌武器装备对比</span></div> -->
                        <!-- <qbzh-agent-image></qbzh-agent-image>
                        <qbzh-agent-table></qbzh-agent-table>
                        <qbzh-time></qbzh-time>
                        <qbzh-text></qbzh-text> -->
                             添加的页面就在这个之前
                        <div ref="targetElement"></div>


 var qbzhAgentTableComponent = Vue.extend(qbzhAgentTable);  //qbzhAgentTable  需要引的页面
                            var qbzhAgentTableInstance = new qbzhAgentTableComponent({
                                propsData: {
                                      data : dddd  // 给页面传入的参数
                                }
                            });
                            qbzhAgentTableInstance.$mount();
                            this.$refs.targetElement.insertAdjacentElement('beforebegin', qbzhAgentTableInstance.$el);   // beforebegin 在targetElement之前加入页面
                            qbzhAgentTableInstance.$forceUpdate();



方式二:

this.question = document.getElementById('qbzhInput').value
            this.smartText = '正在为您'+this.question
            var parentDiv = document.getElementById('chat')


parentDiv.innerHTML += `<div class="my-que">
                                        <div class="que-text">
                                        ${this.question}
                                        </div>
                                        <div class="que-logo-r"></div>
                                    </div>
                                    `
                window.localStorage.setItem("questionText", this.question);
                console.log(typeof window.localStorage["questionText"]);
                console.log('get', window.localStorage.getItem("questionText"));
                this.question = ''
                var qbzhFiveVueVueComponent = Vue.extend(qbzhFiveVue);
                var qbzhFiveVueInstance = new qbzhFiveVueVueComponent(
                                propsData: {
                                      data : dddd  // 给页面传入的参数
                                });
                parentDiv.appendChild(qbzhFiveVueInstance.$mount().$el);

标签:俄乌,question,qbzhAgentTableInstance,parentDiv,添加,var,动态,页面
From: https://www.cnblogs.com/baozhengrui/p/18355007

相关文章

  • 提升SEO与网站可爬性 :动态生成sitemaps和robots.txt文件
    本文由ChatMoney团队出品在现代Web开发中,搜索引擎优化(SEO)是网站成功的关键因素之一。搜索引擎通过网络爬虫来索引网页,而sitemaps和robots.txt文件则是帮助这些爬虫更好地理解和索引网站内容的重要工具。sitemaps简介Sitemap(站点地图)是一种XML文件,它包含了网站上的所有URL以......
  • 动态生成sitemaps和robots.txt文件:提升SEO与网站可爬性
    本文由ChatMoney团队出品在现代Web开发中,搜索引擎优化(SEO)是网站成功的关键因素之一。搜索引擎通过网络爬虫来索引网页,而sitemaps和robots.txt文件则是帮助这些爬虫更好地理解和索引网站内容的重要工具。sitemaps简介Sitemap(站点地图)是一种XML文件,它包含了网站上的所有URL以......
  • Vs+Qt添加ui子页面
    在Qt项目中,如果要实现一个弹出子界面并包含返回按钮的功能,最合适的选择是使用QtDialogFormFile来创建子界面。QtDialogFormFile与QtWidgetFormFile的区别QtDialogFormFile(ButtonBottom)和QtDialogFormFile(ButtonRight):这两种文件类型用于创建对话......
  • 如何为微信小程序添加位置定位和周边服务功能
    要为微信小程序添加位置定位和周边服务功能,可以通过调用微信小程序提供的API来实现。下面是一个示例代码,展示了如何使用微信小程序API来获取用户位置信息,并根据用户位置获取周边服务。首先,在小程序的json配置文件中,需要设置权限,允许使用地理位置信息。在app.json文件中添加如......
  • react-navigation使用redux-saga等处理各种跳转、清除堆栈、返回不同页面的问题
    react-navigation使用redux-saga等处理各种跳转、清除堆栈、返回不同页面的问题名字还是土一点好关注IP属地:上海0.272018.01.2114:26:36字数154阅读4,027一直没有找到有关于 react-navigation 处理app各种不同状态需要默认不同首页的例子,于是只能自己写了。整个......
  • 动态重启更换端口
    原文:https://mp.weixin.qq.com/s/Hz0gStUXe40FNiuY7rudhA一种简单办法是,新代码先用其他端口启动,启动完毕后,更改nginx的转发地址,nginx重启非常快,这样就避免了大量的用户访问失败,最后终止老进程就可以。新思路:判断端口是否占用占用则先通过其他端口启动等待启动完毕后终止老进......
  • Java动态代理与方法拦截实战解析
    Java动态代理与方法拦截实战解析在Java编程中,动态代理是一种强大的技术,它允许我们在运行时创建接口的代理实例,并且可以拦截方法调用。本文将通过一个具体的实例,详细解析如何使用JDK的动态代理机制来实现方法拦截,以及如何编写通用的方法拦截器。实现InvocationHandler首先......
  • MAUI Blazor学习17-NavigationLock阻止页面回退
    MAUIBlazor学习17-NavigationLock阻止页面回退 MAUIBlazor系列目录MAUIBlazor学习1-移动客户端Shell布局-SunnyTrudeau-博客园(cnblogs.com)MAUIBlazor学习2-创建移动客户端Razor页面-SunnyTrudeau-博客园(cnblogs.com)MAUIBlazor学习3-绘制ECharts图表-S......
  • 037.Vue3入门,动态组件
    1、App.vue代码如下:<template><component:is="tabComponent"></component><button@click="change">切换组件</button></template><script>importChild1from"./view/Child1.vue"importChi......