vue2 button标签事件异常

最新推荐文章于 2024-04-19 18:32:11 发布
最新推荐文章于 2024-04-19 18:32:11 发布
阅读量711 收藏
点赞数 1
分类专栏： 前端 文章标签： vue2 button xhr ajx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/biren_wang/article/details/78238391
版权

vue2 button标签事件异常
1、遇到个坑，我在vue模板中给button 绑定事件，如果button标签中不加type=”button”，且click事件中有xhr操作，chrome浏览器竟然是单击后刷新页面，进而导致xhr取消。
同样的逻辑，如果不使用模板，button标签中不加type=”button”，即使click事件中有xhr操作，也不会刷新页面。
不知道是Vue2的bug，还是浏览器的bug，还是其他原因，有待研究。
这里写图片描述

biren_wang
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue无限轮播插件代码实例
10-17
每个图片都是一个 `img` 标签，通过 `alt` 属性来标识图片顺序，而 `src` 指定图片源。 3. **CSS 样式**： - `.wrapper` 作为轮播容器，设置为相对定位，用于包含内容和导航按钮。 - `.wrapper-content` 设置绝对...
vue如何在项目中调用腾讯云的滑动验证码
11-20
在Vue项目的`index.html`中，通过`<script>`标签引入腾讯云提供的滑动验证码JS文件，例如： ```html <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script> ``` 3. **Vue组件中的实现** 在Vue组件...
Vue的事件处理
Web_South_Bay的博客
09-04 159
一、事件的基本使用： 1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名； <button v-on:click="showInfo">点我提示信息</button> 2.事件的回调函数需要配置在methods对象中，最终会在vm上； new Vue({ el:'#root', data:{ name:'尚硅谷' }, me.
vue中触发按钮的点击事件
qq_45732538的博客
05-14 8908
主动触发点击事件 由vue代码触发点击事件，实现的效果是：点击按钮，触发 输入框点击事件，从而实现选择文件。 示例如下： <template> <input type="file" id="input-upload-file" ref="selectFiles" multiple="multiple"> <el-button class="operation-button-select" @click="handleButtonSelected">选择文
Vue之事件绑定（初识Vue事件）
百赢出品，必属精品
04-19 1553
Vue 的事件绑定是指通过 Vue 提供的v-on指令来监听 DOM 事件，当特定事件被触发时执行相应的方法或表达式。事件绑定在 Vue 中是一种重要的交互机制，它使得开发者可以轻松地响应用户的交互行为，并进行相应的逻辑处理。当在 Vue 中使用事件绑定时，通常会使用v-on或简写形式来监听 DOM 事件，并在触发事件时执行相应的方法。监听事件：使用v-on指令来监听 DOM 事件，语法为v-on:event，其中event是要监听的事件名，例如clickmouseover等。也可以使用简写形式。
【Vue 基础】06-按钮点击事件
ChaoChao66666的博客
04-25 769
【Vue 基础】06-按钮点击事件
Vue框架学习笔记——键盘事件
Aer_7z的博客
11-25 1456
简单介绍一下Vue中的键盘事件，为keydown和keyup事件绑定按键。
vue绑定事件
Leon_Jinhai_Sun的博客
07-28 209
事件 创建 03-事件.html 需求：点击查询按钮，按照输入框中输入的内容查找公司相关信息 在前面的例子基础上，data节点中增加 result，增加 methods节点 并定义 search方法 data: { searchMap:{ keyWord: '尚硅谷' }, //查询结果 result: {} }, methods:{ search(){ console.log('search') /
AsimpleplugintoincludeaGooglesigninbuttonintoyourwebapp
08-08
只需在Vue实例中引入组件，然后在模板中添加相应的标签，即可在页面上展示Google Sign-In按钮。 2. **OAuth2授权**：Google Sign-In通常基于OAuth2协议进行用户身份验证。此插件会处理与Google API的交互，包括获取...
crud-sample
03-14
2. **组件（components）**：CRUD操作通常会拆分为多个组件，如ListView（显示数据列表）、CreateForm（创建新数据）、EditForm（编辑已有数据）、DeleteButton（删除数据）等。每个组件都封装了特定的功能和UI，...
Vue：button按钮的点击
谢桥的博客
12-09 2503
【代码】Vue：button按钮的点击。
vue项目使用button进行页面跳转时路由带参数引起错误的解决办法
码出精彩
06-27 3410
vue项目使用button进行页面跳转时路由带参数引起错误的解决办法1、问题描述2、解决的方法3、原理分析 1、问题描述 如图，点击按钮跳转到其他路由会出现带参数的情况（ps：我是用编程式导航进行跳转的，vue编程式导航） 2、解决的方法 我是采用控制变量的方法找出问题并解决的。具体是，把可能的错误的代码删除，其他不变，然后重新运行。然后我就找出问题了。 如图，我的 button 一开始是这样的，会出现问题。 解决方法： 如上图，加上type="button"就不会出现路由带参数了。 3、原理分析
Vue无法给Button按钮添加事件
weixin_45841729的博客
06-03 277
报错信息 无 错误代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <button>1</button> <button>2</button> &lt
vue中的事件绑定
ead_gbe的博客
06-27 5437
按钮1</button><button class="btn" v-on:click = "showInfo2(66)">按钮2
vue 按钮绑定事件小案例
老段的CSDN的博客
10-12 1640
第四步：data给绑定class设置一个初始值。第二步：第一个div；第七步：绑定点击事件并判断样式。1、第一步：写一个div容器。第六步：给样式设置一个初始值。
遇到一个非常坑的BUG！！关于Button的
cuijiahao的专栏
09-26 436
studio里创建的button切记一定不要带文本，否则MAC下会报字符过长的错误！！！！
如何在Vue模板中绑定事件？
2301_77795034的博客
06-05 2049
如果你使用的是addEventListener()方法注册的事件处理程序，你可以在需要阻止事件的传递的事件处理程序中调用event.preventDefault()或event.stopPropagation()来达到同样的效果。如果你在一个非顶层元素上注册了一个事件处理程序（比如一个button元素），并且你想在这个元素上使用event.preventDefault()或event.stopPropagation()来阻止事件的传递，你必须在这个元素上注册事件处理程序而不是在它的父元素上注册。
Vue3基础笔记（2）事件
前端，算法，MATLAB，统计学爱好者，目前主攻Web全栈+考研内容
03-26 725
如上，使用concat只会拼接出来一个新的数组，而不会替换原来的数组；但是可以用this反向赋值回去，实现和变更方法一样的效果。变更方法，顾名思义，就是会对调用它们的原数组进行变更，相对的，有一些不可变的方法，他们不会改变原数组，而总是返回一个新数组。另一方面，“啦啦啦”作为参数传入了方法中。Vue能够侦听响应式数组的变更方法，并且在他们被调用的时候触发相关的更新。如下，由于stop属性的存在，点击子元素阻止了父元素事件的响应。如上，单击按钮即可修改当前元素，并完成自增+1。直接将事件以表达式的方式书写~
vue button的click事件
最新发布
06-05
Vue中的Button组件可以通过v-on指令来绑定点击事件，例如： ```html <button v-on:click="handleClick">点击我</button> export default { methods: { handleClick() { console.log('点击了按钮'); } } }...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值