Vue之v-on之修饰符prevent(007)

v-on未加修饰符prevent
完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://unpkg.com/vue/dist/vue.js"></script><title>v-on(prevent)</title></head><body><div id="app"><form action="https://www.baidu.com/"><input type="text" /><input type="submit" value="提交" /></form></div><script>const app = new Vue({el: '#app',data: {},methods: {myClick() {console.log("Click");}}})</script></body>
</html>

效果

响应表单默认action.
修改代码。

<input type="submit" @click="myClick()"  value="提交" />

效果如图

还是响应action.
修改代码，添加prevent修饰符。

<input type="submit" @click.prevent="myClick()"  value="提交" />

效果如图

成功的阻止了action跳转。并执行了自定义函数myClick(）。

Vue之v-on之修饰符prevent(007)相关推荐

Vue事件绑定以及事件修饰符
事件要理解事件绑定,就得先了解事件. 浏览器是事件驱动型的,根据用户的行为触发不同的事件,根据事件执行相应的操作.我们较为熟悉的事件有三大类型: 鼠标键盘事件鼠标键盘事件事件介绍 onclick ...
Vue——v-model的三种修饰符lazy、number、trim
Vue--v-model的三种修饰符lazy.number.trim v-model.lazy:值修改操作完成之后才会发生变化. v-model.number:值修改时,保持其值为Number类型. ...
Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1.绑定监听@click: (以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @cli ...
vue中常用的事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹 ...
VUE的6种事件修饰符
一.修饰符 1.prevent:阻止默认事件(常用) 2.stop:阻止事件冒泡(常用) 3.once:事件只触发一次(常用) 4.capture:使用事件的捕获模式 5.self:只有event.t ...
Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用，尚硅谷Vue系列教程学习笔记（2）
尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...
Vue tsx 使用自定义v-model修饰符
import { defineComponent, ref, PropType } from 'vue'/*** tsx v-model* v-model 默认绑定的变量名为 modelValue, ...
vue子组件通过.sync修饰符修改props属性
在vue子组件中,如果我们直接修改props中的属性,会报错: Avoid mutating a prop directly since the value will be overwritten w ...
Vue组件通信以及.sync修饰符的使用
文章目录前言一.Vue的组件通信方式 1.1 props/$emit 1.2 Vuex 二.Vue的.sync修饰符 2.1 父组件向子组件传递数据 2.2 子组件使用props接收父组件的数据 ...
vue组件双向绑定.sync修饰符的一个坑
我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...

Vue之v-on之修饰符prevent(007)

Vue之v-on之修饰符prevent(007)相关推荐

最新文章

热门文章