您的位置：首页 > Web前端 > Vue.js

2. Vue prevent修饰符

2020-07-13 05:55 225 查看

Vue prevent修饰符

  • 概述

    prevent修饰符用于阻止默认事件的触发

  • 用法

    <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue prevent修饰符</title>
</head>
<body>
<div id="app">
<form action="www.baidu.com" method="get" @submit.prevent>
<input type="text" value="用户名"><br>
<input type="text" value="密码"><br>
<input type="submit" value="提交" @click="submitBtn"><br>
</form>
<br>
<input type="button" value="按钮" @click.prevent="btnClick">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
methods:{
submitBtn(){
console.log('阻止了默认事件！')
},
btnClick(){
console.log('按钮默认事件')
}
},
}).$mount("#app")
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航