vue更新dom之后整个页面刷新jquery，bootstrap

最新推荐文章于 2024-06-17 23:12:06 发布
最新推荐文章于 2024-06-17 23:12:06 发布
阅读量965 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端学习经历 文章标签： bootstrap vue.js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sunyv1/article/details/121991394
本文记录了一个关于使用Vue和Bootstrap动态生成表单输入框时遇到的问题：当通过v-for循环动态添加表单元素时，页面发生意外刷新。文中提供了解决方案，即不使用form元素而改用div来包裹表单内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

记录自己遇到的坑，使用技术如标题所示
具体原因没找到，也没时间去找

使用场景是动态生成输入框，也就是用了bootstrap的表单，用vue的v-for循环form-group，删除什么的都好说，就是增加数据的时候，往数组里push新的对象，整个页面就回刷新。

解决方案

不要使用form，直接用div

dom刷新问题再探讨
wind__snow的专栏
11-16 3725
之前写过一篇关于dom刷新的东西，感觉写得不太好，重新梳理一下，又写了一篇 用js更新dom是web系统中经常出现的场景，但是有时候可能会遇到这样的情况，在更新dom之后还执行了一段运行时间可能比较长的js代码，这时你会发现，你更新的dom不会立刻在页面显现出来，而要等所有js都执行完之后才能出现。以最近支持的一个项目为例，点击页面一个按钮后执行一段复杂的计算逻辑，虽然现代浏览器执行js的效率比
vue移动端iOS操作过程中自动刷新
qq_40934617的博客
04-12 1985
iOS移动端操作过程中自动刷新 ios自带的刷新机制，内存过量自动刷新。 可能是存在上传图片、文件等的缓存过大。 压缩图片： //压缩的转为file dataURLtoFile(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Ar
vue:对三种获取更新后的dom的方式进行分析
最新发布
qq_45820271的博客
06-17 1084
由于vue的异步更新机制，我们在同步代码中是无法获取到更新后的dom的信息的针对这个问题，我们有三种解决方案获取更新后的dom:3.在微任务中获取因为更新是在同步任务结束后，执行微任务之前，所以上面三种方式可以得到更新后的dom。
事件里面元素怎么立即刷新dom(页面)，而不是等所有代码运行完再刷新。（强制刷新DOM）
我只是个很菜的前端
07-26 2933
事件里面元素怎么立即刷新dom(页面)，而不是等所有代码运行完再刷新。（强制刷新DOM）
JS操作DOM节点实现网页更新
星.云计算
01-17 427
DOM节点操作可以使网页变得更像应用程序，而不是一般的静态页面。可以让页面在不与服务器进行通信的情况下，根据用户输入的内容发生改变，以及在脚本控制下更新页面。 尽管可以用innerHTML这样的技术实现相同的效果，但是它并不是W3C官方支持的。W3C建议符合标准的浏览器采用节点操作的方式支持网页，即规定浏览器应该如何处理文档对象模型（Document Object Model，DOM）。 ...
html dom 刷新,如何告诉javascript立即更新DOM？
weixin_42109925的博客
06-25 1161
我试图在javascript中调用耗时的函数之前向用户加载“加载”消息.HTML：Foo​使用Javascript：var foo = document.getElementById('foo');function tellViewerLoading() {// Tell the user that loading is occuring.foo.innerHTML = 'loading...';...
vue中如何引入jQuery和Bootstrap
11-27
在Vue.js项目中引入jQuery和Bootstrap是开发过程中常见的需求，特别是在需要使用Bootstrap的UI组件或者jQuery的DOM操作功能时。以下是如何在Vue项目中完成这一过程的详细步骤： ### 一、引入jQuery 1. **安装...
Vue CLI3.0中使用jQuery和Bootstrap的方法
10-17
在整个过程中，需要注意的是，使用jQuery和Bootstrap可能会与Vue的一些原则相悖，因为Vue鼓励使用其响应式的数据绑定和组件系统，而jQuery更多是依赖于直接操作DOM，且Bootstrap也并非完全响应式。因此，在整合使用...
集成vue到jquery/bootstrap项目的方法
10-18
集成Vue.js到使用jQuery和Bootstrap的项目中是一个能够将现代前端框架的优势带入传统项目的有效方法。这种集成允许开发者在不影响现有项目结构的情况下，逐渐迁移到Vue，利用Vue的组件化、数据驱动和易于集成的特性...
vue-cli 引入jQuery，Bootstrap，popper的方法
10-18
这些库在Vue组件中可能有特定的用途，例如Bootstrap用于快速界面布局，jQuery用于DOM操作等。本文将介绍如何在使用Vue-cli创建的Vue项目中引入这些库，并通过webpack进行配置。 首先，需要通过npm安装这些库到项目...
当dom上有操作的时候 开始执行接口 每5s刷新一次数据
weixin_44866262的博客
10-25 224
//做判断 当dom上有操作的时候 开始执行接口 每5s刷新一次数据 //为window添加mousemove，移动时设置变量为true,静止后为false; (function () { let isMove = false, timer = null; window.onmousemove = function () { isMove = true; clearTimeout(timer); console.log('移动时',isMove); /
Javascript DOM使用知识
watermelonbig的专栏
11-02 711
DOM，Document-Object-Map(Model) DOM的工作模式，先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。即对页面内容进行刷新却不需要在浏览器里刷新页面。 1、js中有三种对象 用户自定义对象内建对象，如Array,Date等宿主对象，由浏览器提供的对象 2、DOM中最主要的三种节点类型是 元素节点，主查页面标签文本节点，即标签包
vue更改dom属性值之后未及时刷新组件解决方案
hanjiaqian的博客
08-14 1173
1、vue更改dom元素之后延迟执行 this.$nextTick(function(){ ************* }); 2、data体数组增加属性及时更新dom this.$set(改变的数组，改变值对应角标，新值)； 3、js splice()方法 https://blog.csdn.net/hanjiaqian/article/details/107982426 ...
JavaScript--更新DOM
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-14 2912
1. 更新DOM 1.1 更新节点 拿到一个DOM节点后，我们可以对它进行更新。 可以直接修改节点的文本，方法有两种： 一种是修改 innerHTML 属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树： 使用innerHTML设置文本 <body> <div id="item"></div> </body> <script> let item = documen
vue数据更新但视图（DOM）不刷新解决办法
热门推荐
weixin_49315886的博客
04-10 1万+
对此有什么疑问 或者 其它前端面临的问题都可以来欢迎评论 在下知道的定会帮你回答希望能够帮到你 (#^.^#)第二种：vue.$set(要操作的对象或数组, 对象key/索引, 修改后的值)第三种： vue.$forceUpdate()第一种：强制更新dom； vue数据更新但视图不刷新解决办法
带你详解vue中实现全页面或局部刷新的方法
qq_43067585的博客
08-02 5609
vue中怎么实现页面刷新？下面本篇文章给大家介绍一下在vue中实现全页面刷新和局部刷新的方法，希望对大家有所帮助！
js效果需要刷新页面才生效
u014062332的专栏
06-27 7353
今天在一个页面中用到了jquery控制页面显示 发现在首次进入页面时js没有生效，而需要重新刷新一次页面才会有效果
vue当进入页面时强制刷新一次，相当于点击左上角刷新按钮一次
蓝胖子的博客
10-18 3268
vue当进入页面时强制刷新一次，相当于点击左上角刷新按钮一次
黑马前端-Web APIs—设置/修改DOM元素内容和元素属性
黑马程序员官方博客
06-21 1881
教程：JavaScript核心之Web APIs实用案例 前期更新笔记内容：Web API 基本认知 / 获取DOM元素例子：例子： 例子：知识小结：例子： 小结 ： 案例： 页面刷新，页面随机更换背景图片 黑马前端专栏干货多多，关注再学，好方便~2022年前端学习路线图：课程、源码、笔记，技术栈 另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值