vue：@click和input: v-model 执行顺序

最新推荐文章于 2024-03-07 10:07:36 发布
最新推荐文章于 2024-03-07 10:07:36 发布
阅读量907 收藏 1
点赞数 3
分类专栏： vue 移动端 文章标签： vue checkbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46112649/article/details/114689173
版权

今天发现了一个小问题
点击图片下面的复选框
在这里插入图片描述
控制台打印的是
在这里插入图片描述
明明选中了复选框，但是打印的内容却是false，这就有点意思了，看代码
<input
type=“checkbox”
v-model=“checked[i]”
name=""
@click=“handleChecked”
class=“checked”>
在这里插入图片描述
明明操作没有问题，但是发现有点问题，所以就怀疑是异步，
所以加上定时器即可
在这里插入图片描述
看打印效果
在这里插入图片描述
后两行是定时器打印
总结：vue中v-model和@click执行顺序
@click -> v-model

tookingHome
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于elementUI使用v-model实现经纬度输入的vue组件
01-19
绑定一个 [12.34,-45.67] (东经西经，南纬北纬 正负表示) 形式的经纬度数组，能够按度分秒进行编辑，效果如下所示，点击东经，北纬可切换。 经纬度的 度转度分秒 ... click=itudeChange(true)>{{ longFlag | longi
vue-basics:基本观点
04-09
v-model指令是Vue中绑定和使用事件的组合。 从技术上讲，以下两者都在做相同的事情。 v模型是一种语法糖，用于绑定到值，并侦听更改以更新数据。 <label>First Name <input type="text" v-model="firstName" /...
V模型和W模型 需求明确+严格顺序执行
沐雨金鳞
01-21 944
由来： 1980年代后期Paul Rook提出了V模型 Evolutif公司在V模型的基础上提出了W模型 V模型：  W模型：  
Vue的v-model指令与方法绑定执行顺序所导致的数据更新不及时问题
qq_39438464的博客
05-18 2955
Vue的v-model指令与方法绑定执行顺序所导致的数据更新不及时问题 在实际的vue项目开发中，可能会遇到v-model指令双向绑定的数据与标签绑定方法所回调的数据不同步的问题。这是由于v-model与标签绑定方法执行顺序之差所导致的。解决的办法是利用绑定方法先执行的方式来手动模拟v-model，进而实现数据的更新。 问题复现 观察如下的html代码： <!DOCTYPE html> <html lang="en"> <head> <meta char.
Part3-1-3 Vue.js 响应式原理
m0_38066007的博客
06-23 173
1
VUE做列表全选框时候的click导致数据不更新
qq_52598508的博客
08-20 367
click事件的触发是在点击的那一刻，而change事件是在状态改变之后触发。 click：点击之后，视图绑定的数据还没有更新到data里，就已经执行事件函数了，导致data里的数据不是最新的。 change：视图绑定的数据发生了改变，才会去执行change事件函数。
vue blur事件优于click事件触发
weixin_45969830的博客
12-10 1752
vue blur事件优于click事件触发 现有一个防文件夹功能,编辑时有编辑与删除功能。 当文件夹input框编辑失焦时触发编辑文件名并保存 编辑时点击input后方关闭图标触发删除功能 但点击关闭功能时也会触发input失焦事件，且 @blur优先级高于@click会导致点击关闭图标会触发@blur的失焦事件而不会触发@click的关闭事件。 解决方法 @click事件换成@mousedown鼠标点击事件 ...
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
12-29
基于element-ui 组件 开发的vue.js项目， 实现回车键发起搜索，和原生的input ...搜索 icon=search v-model=input on-icon-click=pchandleIconClick keyup.enter.native=searchEnterFun> <input placeholder=搜索
浅谈VUE中演示v-for为什么要加key
12-28
input type=text v-model=name> <button @click=add>添加</button> <li v-for=(item,> <input type=checkbox> {{item.name}} [removed] // 创建 Vue 实例，得到 ViewModel var vm...
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
12-29
<el popper-class=my-autocomplete custom-item=my-remote v-model=state fetch-suggestions=querySearch placeholder=默认空 icon=close on-icon-click=handleIconClick> js: [removed] import Vue from 'vue'...
前端点击事件和input框失焦事件冲突，先后执行顺序
hzh2031015的博客
08-25 920
点击事件和input失焦事件同时触发的先后执行顺序
Vue：v-on、v-bind、v-model、@click、：model用法以及区别（附代码实例）
秀秀的奇妙旅行
10-19 2329
目录v-bind和v-model 和 :model 和：参数应用v-model 和 :model 在element-ui中tab栏中的应用v-model 和 :model 在element-ui中表单中的应用tab栏与步骤条的动态联动效果 v-bind和v-model 和 :model 和：参数 v-bind和v-model的区别 v-model和:model的区别 v-bind= : (属性名) 应用于属性，单向绑定，不存在view向model传值的操作 view向model传值包括——
我的 Vue.js 学习日记 （八） - input 与 v-model
weixin_33834628的博客
05-11 196
上节回顾 上节我学习了事件与修饰符，翻过去瞅一眼~prevent修饰符用在form上，阻止表单提交stop阻止事件的出向外传播capture在正常传播时“插队”once一次性exact出现后可以对按键做限制··· 本节目标 今天来看表单输入绑定，其实这块之前用过很多次，理解上应该不会很困难。 v-model 与 input 问度娘查了一下...
Vue05_v-model进一步学习（双向数据绑定在checkbox中的运用）
linxwx的博客
02-13 830
1.优先级 v-model > value > placeholder，当v-model与value都为空字符串时，placeholder才生效；2.v-model对应的数据为input的value属性，在checkbox中则不同
Vue学习笔记1
weixin_34150503的博客
09-07 69
目录 前言 1、vue和avalon一样，都不支持VM初始时不存在的属性 2、input元素中属性与v-model同时存在以属性为优先 3、VM中的函数放到data属性和methods属性中的区别，以及函数调用时带括号与不带括号的区别 前言 本文不是Vue.js的教程，只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记。 1、vue和...
v-model的input事件和自定义input事件的执行顺序，探究v-model核心原理
最新发布
util123的博客
03-07 491
v-model便捷高效的特性深得开发者喜爱，其背后的运作机制以及其原生的input事件的交互逻辑和执行顺序，虽然可以通过直接测试的方式浅层获知，但往往需要深入探究才能真正知晓
vue的input事件与点击事件冲突，先失焦点
duruo0的博客
03-22 2273
在开发app时，自己做了个搜索筛选，结果每次输入字符后，想在回显的列表中选数据时遇到了问题，点第一次没反应，得点击第二次才会触发事件。打印发现在第一次点击事件时，只触发了input的blur事件，第二次才会触发点击事件，遂解决问题。，将按钮click事件替换为 mousedown 事件，优先于blur事件执行，最终实现了正确效果，感恩！搜索发现，是因为input中blur失去焦点事件与点击事件冲突，参考。
Vue v-model修饰符，@change事件
soul7y的博客
07-23 8749
输入框经常受到需求或者客观逻辑的制约，对于输入内容需要就进行优化。 v-model.number 使用修饰符.number可以将输入的数据转换为Number类型，否则虽然你输入的是数字，但它的类型其实还是string。 v-model.trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。 @change @change当输入框失焦的时候触发而且在elementUI中使用change时是这样的@visible-change。可以使用于：<input>,
怎样在vue中生成多个input和v-model
08-30
在Vue中生成多个input和v-model可以通过以下步骤实现： 1. 在Vue的data属性中定义一个包含多个input值的数组，例如inputs: []。 2. 使用v-for指令在模板中循环遍历inputs数组，生成多个input元素。 3. 在v-for循环中，给每个input元素绑定v-model指令，并设置为inputs数组中对应的元素，如v-model="input"。 4. 在方法中定义一个函数，用于动态添加、删除inputs数组的元素。 5. 在模板中添加一个按钮，点击按钮时调用该函数，实现动态增加input元素。 下面是一个简单的示例代码： ```html <template> <div> <div v-for="(input, index) in inputs" :key="index"> <input v-model="input" /> </div> <button @click="addInput">添加输入框</button> </div> </template> <script> export default { data() { return { inputs: [] }; }, methods: { addInput() { this.inputs.push(''); } } }; </script> ``` 在上面的示例中，通过v-for循环遍历inputs数组，生成了多个input元素，并使用v-model指令将每个元素与inputs数组中对应的值进行双向绑定。点击"添加输入框"按钮时，会调用addInput方法，向inputs数组添加一个空字符串元素，从而实现动态增加input输入框的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值