VUE 鼠标失焦事件数据改变但前端页面不渲染问题解决

最新推荐文章于 2024-06-05 10:42:25 发布
最新推荐文章于 2024-06-05 10:42:25 发布
阅读量1k 收藏 1
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46573158/article/details/121859806
版权

vue.js 前端 javascript

直接上问题：

页面代码

前端vue页面
js

控制台数据

出现问题

设置了鼠标失焦事件 @on-blur=“proposalAmountBlur” 当鼠标失焦时自动将数据做千分位符格式保留两位小数，但是当测试时候一直没有改变格式，以为没有获取到鼠标失焦事件，直到控制台输出数据的时候才发现数据已经被格式化但是是前端没有及时渲染，但是VUE 元素绑定的渲染是动态实时的（也就是说只要改变了绑定的值，被绑定的值都会进行实时修改）

解决问题

想到可能是因为数据层次太多，render函数没有自动更新，尝试进行手动强制刷新。
使用

this.$forceUpdate

进行强制刷新
强制刷新

成功刷新

不出所料，解决问题！

喜欢吃糖丶
关注
专栏目录
掌握Vue代码中的事件处理：从焦点事件到输入法事件
LeiCheerup的博客
10-30 1393
Vue是一种流行的JavaScript框架，用于构建交互式Web应用程序。其中，事件处理是Vue框架非常重要的一部分，本文将详细讲解Vue事件处理中的焦点事件，鼠标事件，滚轮事件，输入事件，键盘事件，输入法事件。
vue修改数据页面不重新渲染
m0_64969829的博客
02-17 1091
使用vue，遇到几次修改了对象的属性后，页面并不重新渲染 三、解决方案 Vue 不允许在已经创建的实例上动态添加新的响应式属性 若想实现数据与视图同步更新，可采取下面三种解决方案： 1.Vue.set() Vue.set( target, propertyName/index, value ) 参数： target：要修改的对象或数组 propertyName/index：属性或下标 value：修改后的value值 this.$set(this.item, "newProperty", "新值");
onblur鼠标失去焦点事件
weixin_33768481的博客
08-30 458
鼠标点击失去焦点事件onblur
Larry的博客
01-11 3885
鼠标点击获得焦点事件 onfocus 鼠标点击失去焦点事件 onblur 鼠标移动事件 onmouse vue 里的是@blur 是当元素失去焦点时所触发的事件 <template> <el-col class="batch-li" :span="uploadData.file_type == 1 ? '10' : '19'"> <a-input placeholder="" v-model="uploadData.uploadData.fi
jQuerry的鼠标聚焦、失焦、悬停、悬停又失焦、双击鼠标变色事件
qq_44867886的博客
10-21 1395
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".hide").click(function(){ $(".ex").hide("slow"); ...
Vue中失去焦点时所触发的事件
热门推荐
weixin_44867717的博客
09-24 4万+
Vue中失去焦点时所触发的事件 1-html、失去焦点 <input type="text" onBlur="txtblur()"> <script> function txtblur(event){ //当前元素失去焦点 console.log(123); } </script> 2-vue2.0、失去焦点 @input 一般用于监听事件，只要输入的值变化了就会触发input <input :type="typ
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
10-15
为了解决这个问题，我们可以在子组件中使用watch来观察data数据的变化，并在watch的回调函数中调用created钩子中期望执行的逻辑，或者保证在请求接口或后台数据后，更新父组件传递给子组件的数据，从而触发子组件的...
vue2.0解决el-table无限滚动解决数据量大前端界面渲染耗时或卡顿问题
weixin_38644630的博客
11-08 4248
解决el-table渲染数据量大导致前端界面渲染卡顿或耗时较长问题
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
10-18
在使用Vue.js框架进行前端开发时，经常会遇到需要根据用户的鼠标操作来动态地改变页面元素样式的需求。特别是在制作交互式UI时，鼠标移入移出元素时触发的样式变化是一个非常常见的操作。本文将详细介绍如何在Vue...
基于vue的鼠标右键菜单事件本组件提供右键菜单的显示和隐藏
08-10
- Vue.js是一个轻量级的前端框架，它的核心特性包括声明式渲染、组件化、响应式数据绑定和指令系统。 - 组件是Vue.js的核心概念，它是一个独立的可复用代码块，可以像HTML元素一样插入到其他组件或页面中。 2. **...
vue 中 ios系统中input 失去焦点时，页面不回弹。
lzt199931415926的博客
12-27 1380
一 问题描述 最近在做移动端兼容时，发现ios系统在输入内容时，页面被挤上去了，但输入完成后，键盘回弹了，页面没有回弹，还是停留在刚才输入时的位置。 解决办法 mounted(){ document.body.addEventListener('focusout',()=>{ window.scrollTo({top:0,left:0,beh...
【Vue】路由组件中失去焦点和获得焦点的两个事件
【敦厚的曹操】的专栏
06-07 1001
【Vue】路由组件中失去焦点和获得焦点的两个事件
失去鼠标焦点触发
在行进路上的博客
10-10 3188
blur() 触发每一个匹配元素的blur事件。 这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的 focus() 触发每一个匹配元素的focus事件。 这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。 一
vue中自动失去焦点_vuejs 失去焦点，单击全局隐藏某些浮动元素
weixin_39840153的博客
01-13 2268
先看图，我们想实现一个这样的功能， 单击高级搜索，弹出一个div，div里面是slot进去的，有各种标签，包括表单元素。再单击其他区域，会隐藏这个弹出的div，类似blur事件。麻烦给点思路实现这个组件(功能)， 写一个这样的组件，弹出框的内容slot进去，里面的表单可以进行操作输入，以及动态渲染dom结点。请问有朋友实现过类似的功能吗，麻烦给点思路。主体上可以看这个vue-weui，对于点击sl...
elementUI input-number组件在blur处理完数据后，视图没改变问题修复
最新发布
qq_40122602的博客
06-05 268
推测，这个现象是由于输入框默认为1，然后处理完变量还是1，就没进行dom渲染 参考了https://blog.csdn.net/qq_53492819/article/details/133200755。问题：页面打开后，在输入框输入1.xx的小数，blur处理完绑定的变量被处理成1，但是输入框显示的还是1.xx。尝试在页面打开后，在输入框输入2.xx的小数，blur处理完变量变2输入框正常展示2。背景：使用按钮组展示变量按钮，并在按钮组后面加了输入框，允许输入更大的数。
avue-crud组件的行内编辑实现失焦保存，在没有右侧操作栏的情况下
二三的博客
03-16 1405
cell、blulr，我在官网配置文档上并没有看到。可能是官网文档进行了升级，记得去年的时候官网配置项文档并不是如今这个样子，里面的配置项很多。不要以为官网上没有该属性的介绍就真的没有，要勇于质疑，自己可以先写着试下，总归会发现新大陆的。其次，avue 框架确实可以极大的提高开发者的效率，减少页面开发工作，但前提是你要熟悉 avue框架的各个配置项。因为它的配置项实在是太多了，如果不是太熟悉，真的不如使用 element 进行开发来的方便。
鼠标聚焦则显示浮框事件
qq_36666181的博客
09-27 1359
html: &lt;!--组件鼠标悬停出现浮框--&gt; &lt;div id="mydes" class="mydes"&gt; &lt;div id="mydes-span" class="mydes-span"&gt;&lt;/div&gt; &lt;/div&gt; js: des为想要传入的内容，你可以去掉，直接在ht
vue 数据更新不渲染
看风听雨
11-08 4645
情景：       在使用vue element的table表格时，想对table的cell进行编辑。        点击修改实现如下功能： 代码： &lt;el-table-column label="名称"&gt; &lt;template slot-scope="scope"&gt; &lt;div v-if=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值