@blur赋值里反向给v-model赋值无法实现

最新推荐文章于 2023-09-22 22:15:00 发布
最新推荐文章于 2023-09-22 22:15:00 发布
阅读量417 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44094836/article/details/112924532
版权
本文探讨了在 Vue.js 开发中遇到的一个问题：在尝试使用 `this.$set` 对数组进行动态赋值时，虽然 `@blur` 事件触发的参数正确执行，但赋值操作却没有正常渲染。文章详细分析了该问题的原因，并提供了有效的解决方案，帮助开发者理解 Vue 的响应式原理。
摘要由CSDN通过智能技术生成

1.赋值的时候没法渲染上，@blur里的参数有执行

this.$set(this.testArr,0, this.testArr[0]+1);

this.$set.(要赋值的对象，要改变的位置，要赋值的值)

weixin_44094836
关注
v-model指令 - 双向数据绑定
王佳斌
07-27 3794
前言 什么是双向数据绑定 vue是一个mvvm框架，即数据双向绑定，它允许当数据发生变化的时候，视图也发生变化，当视图发生变化的时候，数据也会跟着同步变化。我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。 简述双向绑定 所谓双向绑定，当M层数据更改时自动更新V层数据，反之V层更改时自动更新M层数据。 与单项绑定区别 当M层数据更改时自动更新V层数据，而当V层更改...
简历资料
刘群智的博客
07-27 1889
专业技能 1.移动端前端开发，PC端前端开发 　　在阿里的几次面试中，总是被问到移动端和PC端有什么区别，当时回答的时候主要是回答了在兼容性、网速、适配、页面布局 等方面的不同，但是还是很不系统，所以这里做一个总结。 第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机， 一般浏览器使用的都是webkit内核，所以说做移...
vue @blur v-model数据没有更新问题
weixin_30291791的博客
01-15 721
今天遇到一个问题，是一个输入框绑定了一个失去焦点事件，要发送一个客户填写的数据给后台查询然后拿到返回值把它渲染到页面上，但是从后台获取到的数据却没有在页面上渲染出来，console.log打印时显示数据已经变化成了从后台拿到的数据，却没有渲染到页面上。 看了官方文档之后发现，受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。 因为 Vue.js 在初始化实例时将属性转为 get...
vue input中on-blur赋值没有反应
xiaoshengjinbu的博客
10-12 691
vue input中on-blur赋值没有反应，并且再次输入时，显示上次输入的值，打印了一下数据显示已经赋值成功，但是没有显示，考虑应该是赋值没有刷新的问题，直接强制刷新：this.$forceUpdate() 一下就好了 ...
easyUI class ="easyui-textbox" blur事件不触发或者第一次获取不到value解决方法
qq_35434203的博客
09-11 1288
easyUI class =“easyui-textbox” blur事件不触发或者第一次获取不到value解决方法 解决easyui-textbox 事件不触发 解决easyui-textbox 事件第一次触发获取value为空 <input type="text" id="username" name="username" class="easyui-textbox" require...
Vue input的blur事件影响下拉框中点击事件的解决方案 用mousedown/mousedown替代click
真爱一生的博客
01-12 781
input blur
Angular 1.0 入门指南
追逐阳光
04-11 8056
Angular 1.0 入门指南1. angular 1.0 特点 数据双向绑定MVVM 隔离作用域 2. Angular 的作用域 scopescope rootScope 先来看一下 angular 的一般使用格式 //作用域定义 模块注入 angular.module('myApp', ['ui.bootstrap']);//获取定义的App var app = angular.mod
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
m0_67266787的博客
02-24 838
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
【Vue中的@blur@input事件解读】
最新发布
qq_44712196的博客
09-22 3059
当输入框失去焦点时，触发blur事件，并调用Vue实例中的validateSingle方法对indexInfo.score进行验证，然后再调用getRightVal方法对其进行处理，确保它的值符合要求。：当输入框的值发生变化时，触发input事件，并调用Vue实例中的getRightVal方法来对indexInfo.score进行处理，确保它的值符合要求。示例代码中，当用户完成输入总分并且焦点移开时，对输入进行验证会触发@blur事件，会出现消息提示框——”请输入指标名“
vue中input的v-model清空操作
12-08
问题来源 写input组件的时候需求一个清空按钮，但是如果直接修改prop中父级的传值会报错。但是如果不修改父级无法更新值，也会带来开发的问题。 解决 v-model 完成大部分数据双向绑定 <input type="text" :value="inputValue" @change="$emit('change',$event.target.value)" @blur="$emit('blur',$event.target.value)" @focus="$emit('focus',$event.target.value)" @input =
表单焦点: focus/blur
neweastsun的专栏
08-21 6889
表单焦点: focus/blur当用户点击或按TAB键时元素会获得焦点。也有autofocusHtml属性可以设置元素获取默认焦点，当页面载入或其他方式。获得焦点通常意味：准备在这里接受数据。所以此时我们可以写代码实现初始化或加载工作。失去焦点时刻可能更重要（“blur”）。当用户在其他地方点击或按TAB键使焦点移动至下一个表单域，或其他方式。失去焦点通常意味：数据已经进入。所以我们可以运行代码检查
（划重点）v-model的实现（Vue2和Vue3），change、blur、input事件。
qq554244261的博客
02-19 4880
在学习中了解到，v-model实际上只是一个语法糖。并且Vue3对v-model的逻辑进行了重写。于是决定对Vue2和Vue3中对于v-model的实现进行探究。 v-model中触发的事件 v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件： text 和 textarea 元素使用 value property 和 input 事件； checkbox 和 radio 使用 checked property 和 change 事件； select 字段将 value 作
v-model与value的赋值顺序问题
weixin_49562132的博客
12-03 2026
出现的问题 <span style="position: relative"> <input type="text" id="article-img" v-model="blog.img" ref="blogimg" class="article-title" placeholder="上传封面图" style="width: 18%; font-weight:400;font-size: 12px;position: relative;top:-2px;"> &l
判断input输入框的值，用到input事件，blur事件，focus事件
Tang
07-09 1万+
需求：当输入框有字或者正在输入时，右边的圆形取消按钮才出现。否则不出现。&lt;script type="text/javascript"&gt;    //输入框正在输入时    $('.f2 input').on('input',function(){      if(!($('.f2 input').val()=='')){        $(".close").show();      }...
vue @blur获取input val值
niesiyuan000的博客
08-15 1万+
@blur="validScore($event)" validScore(event){ alert(event.target.value) }
vue2 -- 响应式赋值组件更新数据v-model不生效问题
King Saj
11-05 3529
问题描述 在使用Vue双向绑定(v-model)功能时，封装子组件通过Inject功能使用了父组件中的 model 中的属性进行双向绑定，此时在程序中去更新model的某个属性的值，发现子组件没有实时渲染。 原因分析 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。 解决方案 对于这种对象变化，我们有三种方法去解决： 方法一 使用Vue.set(object,key,value) Vue.set(vm.obj,"sex",
uni-app中v-model绑定后使用@input或者@blur后无法反显
frewtyh的博客
02-09 1044
uni-app中v-model绑定后使用@input或者@blur后无法反显
关于vue.js存在某些情况下 v-model绑定数据不实时更新解决办法
热门推荐
qq_36366705的博客
05-18 2万+
最近做一个管理系统项目 碰到这样的问题问题描述： 当点击选择车牌号 自动出现所属公司和负责线路信息，（见图一） 假如不选 给后台传值为空；当修改时 点击车牌号调取后台接口会发现  其实已经成功赋值给 当前字段，但是页面没有显示。当第二次点击请求接口时，这个时候才会在页面展示上一条点击的信息。查了很多资料，其中原因如下见Vue.js中文官网-&gt;进阶-&gt;深入响应式原理-&gt;变化检测问题...
v-model可以加判断值为空赋值嘛
06-10
可以，在 v-model 中可以使用 JavaScript 表达式来实现判断值是否为空的逻辑，并在值为空时进行赋值的操作。例如： ```html <input v-model="name" type="text"> ``` 可以改写成： ```html <input v-model="name" type="text" @blur="name || (name='默认值')"> ``` 这样，当输入框失去焦点且输入框中的值为空时，就会将 name 的值赋为默认值。你可以根据实际需求来进行修改。需要注意的是，在 v-model 中使用表达式时，需要使用 @ 符号来绑定事件，否则表达式会被当做字符串处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值