vue使用prevent修饰符阻止标签的默认行为

使用prevent修饰符可以阻止标签的默认行为
比如a标签，默认跳转到指定连接

<!--定义vue的操作对象-->
<div id="app">
<!--   使用prevent修饰符阻止标签的默认行为 --><a href="www.baicu.com" @click.prevent="linkClick">百度一下</a>
</div>
<!--导入vue.js-->
<script src="./vue.js"></script>
<script>//创建一个vue实例var vm = new Vue({el:"#app", //指定实例控制的DOM元素data:{ //存储页面数据msg:"欢迎学习vue",msg2:"<h1>我是一个字符串</h1>",title:"这是一个按钮"},methods:{ //在此处定义实例可用的所有方法linkClick(){console.log('点击链接')//在这里处理点击事件}}})</script>

此时点击已不能跳转

vue使用prevent修饰符阻止标签的默认行为相关推荐

快速了解4种阻止事件冒泡的方法（原生js阻止，vue中使用修饰符阻止）
阻止事件冒泡的方法前端结构 <div id="app"><div class="father-box" @click="click ...
用vue的事件修饰符阻止冒泡
用mousemove事件举例 1.传统做法: 定义一个阻止冒泡的函数stop,形参为事件e,执行e.stopPropagation(), 在标签上添加v-on:mousemove="stop ...
026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Vue 32个修饰符，你不一定全知道！
点击上方前端开发博客,关注公众号回复加群,加入前端群前言 vue简洁好用体现在很多个地方,比如其内置了32+修饰符,可以很方便我们阻止冒泡.阻止默认事件.鼠标事件处理.系统键盘事件等等,让我们可 ...
详细解析vue中的修饰符
1.表单输入框input中的修饰符 .lazy:加lazy修饰符的区别相当于在输入后失去焦点或者摁了enter键视图才更新.不加lazy则是在keyup就更新,如下: <input v-mode ...
[vue] vue常用的修饰符有哪些？列举并说明
[vue] vue常用的修饰符有哪些?列举并说明 .trim .number .stop .prevent 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起 ...
vue中 .sync 修饰符个人理解
vue中.sync修饰符有什么用 .sync 修饰符其实就是一个语法糖 vue中 :子组件不能修改props 外部数据 vue中: $emit 可以触发事件并传参 vue中: $event可以获取 ...
Vue 自定义按键修饰符对应表
Vue 自定义按键修饰符对应表按键键码 8 BackSpace 9 Tab 12 Clear 13 Enter 16 Shift 17 Ctrl 18 Alt 19 Pause 20 Caps_L ...
vue使用trim修饰符去掉空格
vue使用trim修饰符去掉空格去掉input之类的输入框后面的空格,使用v-model.trim修饰符 <input v-model.trim="value">&l ...
vue的lazy修饰符和number修饰符、表单结构
目录 vue的lazy修饰符 vue的number修饰符表单的构成表单域表单控件 vue的lazy修饰符在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 ...

vue使用prevent修饰符阻止标签的默认行为

vue使用prevent修饰符阻止标签的默认行为相关推荐

最新文章

热门文章