VUE @change 和 @click的区别

最新推荐文章于 2023-12-30 10:04:20 发布

谁的青春不迷茫g

最新推荐文章于 2023-12-30 10:04:20 发布

阅读量1.7k

点赞数 4

分类专栏： web 文章标签： vue.js Powered by 金山文档

本文链接： https://blog.csdn.net/weixin_46448867/article/details/129305618

版权

web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在给单选框添加事件的时候出现了一个问题

看代码:

<template>
    <div >
       <input type="radio" @click="test"  v-model="userLoginForm.code" value="1" id="psd"><label for="psd"></label>学生
       <input type="radio" @click="test"  v-model="userLoginForm.code" value="2" id="psd"><label for="psd"></label>管理员
    </div>
</template>

import { reactive } from 'vue'

export default {
  name: 'Login',
  setup () {
    const userLoginForm = reactive({
      code: ''
    })
    const test = async () => {
      alert(userLoginForm.code)
    }
    return {
      userLoginForm,
      test
    }
  }
}
</script>

结果:

我点击的是管理员预期弹出是2结果弹出是1

把@click改成@change事件之后

结果:

这回就正常了

原因: @change 是在内容改变的时候触发 @click是在点击的时候触发，此时内容还没有改变

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

谁的青春不迷茫g

关注关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

关于click和change的使用区别

03-30

关于click和change的使用区别

Vue 输入框组件 @input、@keyup.enter、@change、@blur

且听风吟的博客

02-16

3643

input input 事件结合了 keyup事件和 change事件，会在keyup时判断值是否发生变化，变化了则触发该事件。 input 一般用于实时监听事件，只要输入的值变化了就会触发input。 keyup.enter keyup.enter事件是在pc上点击回车键触发，在手机上是需要点击输入键盘上的确定键触发。 click @click 与enter事件相似，在手机上都是要经过触发的虚拟键盘才会触发事件，一般用于触发事件。 blur blur(失焦)是输入框在输入完成、失去焦点，移到其他地方触发

3 条评论您还未登录，请先登录后发表或查看评论

vue下的@change事件

热门推荐

bingguang1993的博客

09-25

5万+

楼主最近在项目中实践了一下vue，期间遇到了一些坑，现在记录一下先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="v...

vue项目input标签checkbox，change和click绑定事件的区别

秋来九月八

12-15

7680

我们经常在vue开发项目的过程中，遇到需要对input框使用v-modal的这种情况，在有的时候，不光需要双向数据绑定，还需要在改变数据之后绑定其它的操作，那么问题来了，你是使用@change绑定事件还是使用@click绑定事件建议不要通过click绑定事件，对待input标签，最好通过change来触发，本人血的教训。 <input @change="inputchecked" clas...

Vue中的单选框、复选框和选择框的使用；click和change的区别

m0_37922443的博客

04-23

7307

单选框和复选框按照v-model进行分组，单选框的数据是一个值，复选框是一个数组。每一个框都有自己的value值，被选中的元素的value值就是对应的v-model绑定的值。  <input type="radio" value="0" v-model="sex">男 <input type="radio" value="1" v-model="sex">女 <button @click="submit">提交</butt

@blur @focus @input @click @change @close事件的区别

m0_64707449的博客

09-28

1293

@blur @focus @input @click @change @close事件区别

Vue 监听元素前后变化值实例

11-19

在Vue.js中，监听元素前后变化值是一种常见的需求，用于实时跟踪数据的变化并执行相应的操作。在提供的示例中，我们看到一个简单的Vue组件，它使用`watch`对象来监听`item`属性的变化。首先，让我们详细解释一下`...

解决vue项目中type=”file“ change事件只执行一次的问题

08-27

解决 Vue 项目中 type="file" change 事件只执行一次的问题在 Vue 项目中，type="file" change 事件只执行一次的问题是一个常见的bug。这个问题的出现是因为当我们上传了一个文件后，将获取到的文件名清空后，却...

解决vue elementUI 使用el-select 时 change事件的触发问题

01-18

请选择 change=selectChange()> <el v-for=item key=item.value label=item.label value=item.value></el> 我们需要的是选择之后才触发，但是这样写你会发现，页面初始化的时候会触发多次，选择之后又会触发多次...

解决vue的touchStart事件及click事件冲突问题

11-20

这导致在同时绑定了`touchStart`和`click`的元素上，可能会出现两个事件都被触发的情况。为了解决这个问题，我们可以采取以下两种策略： 1. **使用`preventDefault()`方法** 在`touchStart`事件的处理函数中调用...

Vue的自定义@change事件（自己学习用途，不建议参考）

g2kajun的博客

06-05

1万+

# html dom事件虽然我会用Vue会写一些组件和组件但是，有一些细节需要自己去扣，比如说我写项目的时候，遇到问题，那个change事件我就不是很清楚。我就去百度后面才发现，change事件是组件里自定义的所以我去了解了一下html5里面的几个事件当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中： ```javascript onclick=JavaScri

vue的@change的用法

好看的皮囊千篇一律，有趣的灵魂万里挑一。

10-07

1万+

@change 是 Vue.js 中用于监听表单元素值变化的事件处理器。通常用于监听表单输入框等元素的变化，以便在值发生变化时执行特定的操作。

vue中ckeckbox(复选框)的使用，及对click事件和change的理解

MMryyy的博客

07-09

1万+

vue中ckeckbox(复选框)的使用心得，及对click事件和change的理解通过点击事件判断复选框状态，v-model来绑定checkbox的值，更改文本及css样式， <div class="option"> <input type="checkbox" name="" @change="checkclick(mytype)" v-model="checkVa...

Vue中@change、@input和@blur的区别以及什么是@keyup

weixin_45288172的博客

11-03

1万+

Vue中的@change、@input、@blur、@keyup事件

@change事件传递多个参数，保留默认参数，并传递自定义参数

sika-master的博客

06-02

9590

change时间的多参数传递

change事件用法

liujuan183的博客

12-09

1万+

//实现效果：下拉菜单中单选框被选中，则显示show1 //否则隐藏文本框单选框密码框文本域请填写字段选项： $(".rad")

详解Vue3中的常见的监听事件click、input和change

最新发布

一起学习

12-30

5702

本文主要介绍Vue3中的常见的监听事件click、input和change。

onclick,click和onfocus，change区别

fglxhlw的博客

08-31

1653

onclick和onfocus区别 onclick是在对象被鼠标点击或者选取时触发。 onfocus是在对象获得焦点时触发。（获得焦点可以通过鼠标点击或者tab键）。 onchange:是在域的内容改变时发生。注意：对于onfocus第一次点击时只是获得焦点，第二次点击才真正执行方法。 ## click和onclick区别： onclick是javascript原生事件，click是jquery中新增的方法。 click是动作，模拟鼠标的点击操作。onclick是绑上事件，告诉浏览器在鼠标点击的时

@selection-change在vue中

08-19

在Vue中，@selection-change是用于监听表格的选择变化事件的方法。当表格的选择项发生变化时，该方法会被触发。通过该方法，我们可以获取到选择的数据项，并进行相应的操作。在引用中的代码示例中，使用了@selection-change来绑定一个自定义的方法handSelectionRules。在这个方法中，使用console.log来输出选择的数据项和自定义的参数。通过这样的方式，我们可以自定义传参给@selection-change方法。的代码示例中，也使用了@selection-change来绑定一个方法handleSelectionChange。在这个方法中，首先使用this.$forceUpdate()来强制更新视图，然后通过val参数获取到选择的数据项。接着，将获取到的数据项进行相应的操作，并将结果赋值给相应的变量。通过这样的方式，我们可以在选择变化时进行一系列的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [web前端-Vue中使用elment的el-table时@row-click与@selection-change](https://blog.csdn.net/MinggeQingchun/article/details/118768271)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [VUE中复选框选中事件@selection-change的坑](https://blog.csdn.net/Yilong18/article/details/128243795)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]