VUE--v-on修饰符
2024-09-08 09:01:39
1、v-on的修饰符
.stop:阻止事件冒泡
<div @click="getTitle">
阿Q
<button @click="getBut">按钮</button>
<button @click.stop="getBut2">按钮2</button>
</div>
.prevent：阻止默认行为
<form action="Baidu">
<input type="submit" value="提交">
<input type="submit" value="提交" @click.prevent="getSubmit">
</form>
.enter:监听enter(确认)键的情况-------（按下\弹起）
<input type="text" @keyup="getKeyup">
<input type="text" @keyup.enter="getKeyup">
.once：事件只触发一次
<button @click="getOnce">按钮</button>
<button @click.once="getOnce">按钮2</button>
******完整代码*******
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<div id="app">
<div @click="getTitle">
阿Q
<button @click="getBut">按钮</button>
<button @click.stop="getBut2">按钮2</button>
</div>
<br> <form action="Baidu">
<input type="submit" value="提交">
<input type="submit" value="提交" @click.prevent="getSubmit">
</form>
<br> <input type="text" @keyup="getKeyup">
<input type="text" @keyup.enter="getKeyup">
<br>
<br> <button @click="getOnce">按钮</button>
<button @click.once="getOnce">按钮2</button>
</div> <body>
<script>
let vm = new Vue({
el: '#app',
data: () => ({ }),
methods: {
getTitle: () => {
console.log("啊Q")
},
getBut: () => {
console.log('Btn')
},
getBut2: () => {
console.log('Btn2')
},
getSubmit: () => {
console.log('getSubmit')
},
getKeyup: () => {
console.log('getKeyup')
},
getOnce: () => {
console.log('getOnce')
}
}
})
</script>
</body> </html>
最新文章
- 前端学PHP之mysql扩展函数
- GIS部分理论知识备忘随笔
- Web持久化存储Web SQL、Local Storage、Cookies（常用）
- jQuery使用.on()无法绑定hover
- Django base view
- 2.设计包含 min 函数的栈[StackWithMinValue]
- HTTP 笔记与总结（1 ）Telnet 分别发送 HTTP GET 和 HTTP POST 请求
- linux后台开发排错常用工具
- JavaSE复习_5 Eclipse的常见操作
- Finding awesome developers in programming interviews（转）
- subversion javahl
- Vulkan Tutorial 27 combined image sampler
- Java 中文编码分析
- Springboot + Atomikos + Druid + Mysql 实现JTA分布式事务
- OracleSql语句学习(五)
- Jmeter性能测试之关联(三)
- JS判断滚动条到底部，页面是否有滚动条
- Css3新属性：calc()
- Lab 1-2
- ScintillaNET的应用