当前位置:网站首页>v-on的修饰符
v-on的修饰符
2022-07-17 00:06:00 【静止呀】
<div id="app">
<!-- 2. .stop修饰符的使用 -->
<!-- 会产生冒泡 -->
<div @click="divClick">
<!-- .stop阻止事件的冒泡 -->
<button @click.stop="btnClick">按钮</button>
</div>
<!-- 3. .prevent修饰符的使用:阻止默认提交 -->
<br>
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<!-- 3. 监听某个键盘按键的点击 比如监听回车-->
<input type="text" @keyUp.enter="keyUp">
<!-- 4. .once修饰符的使用 比如这个按钮只能点一次-->
<button @click.once='onceClick'>按钮2</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀'
},
methods: {
btnClick() {
console.log("btnClick")
},
divClick() {
console.log("divClick")
},
submitClick() {
console.log("submitClick")
},
keyUp() {
console.log("keyUp")
},
onceClick() {
console.log("once")
}
}
})
</script>
边栏推荐
- Day16 sorting, current limiting
- three.js初体验:模拟一个小树杈的生长
- 今天的码农女孩做了关于生命周期的笔记以及动态时钟的练习
- About foreign key references, cross domain headers, and ref usage
- 小程序swiper高度
- Collection and summary of penetration test information
- uni canvas截取图片
- 解决小程序自定义底部菜单切换闪动
- Common mode attack and shared prime of RSA
- Day05-Cookie,Session,Csrf
猜你喜欢

ModelArts-图像分类and物体检测

Initial flask
![[elementui El date picker date selector, the end time must not be earlier than the start time, and only the date of the specified number of days from the start time can be selected]](/img/73/af7ca3f670ffee18081b9ca6a9ccf6.png)
[elementui El date picker date selector, the end time must not be earlier than the start time, and only the date of the specified number of days from the start time can be selected]

Maker-鸿蒙应用开发培训04
![Eye of depth III - (6)] mathematics: matrix diagonalization and quadratic form 1](/img/6f/079f9d39b560a31fe3a0b57e0ff5aa.png)
Eye of depth III - (6)] mathematics: matrix diagonalization and quadratic form 1

everything搜索不到startup_lpc11x.s文件

JSX compilation

Uni app wechat applet - Mall (8) - order details
![Buuctf [bjdctf2020]ezphp1 detailed explanation](/img/10/d2593dff2f4a5f0ca41a9f651128df.png)
Buuctf [bjdctf2020]ezphp1 detailed explanation

分布式之数据库和缓存双写一致性方案解析(转载)
随机推荐
今天的码农女孩做了关于生命周期的笔记以及动态时钟的练习
JS replaces a character in the string, and JS modifies the specified character in the string
(六)test命令
About foreign key references, cross domain headers, and ref usage
JSX compilation
Day13 mixed view base class
uni 阻止按钮多次点击 按钮多次点击
Oracle automatic storage management (ASM)
(七)流程控制
深度之眼三——(3)】 數學:矩陣特征值與特征向量1
Uni app wechat applet - Mall (8) - order details
小程序swiper高度
Uni app wechat applet - Mall (3) - Mall Homepage
Summary of Applied Cryptography
网站如何统计访问人数?51LA如何安装使用?
If the website is hacked, what if you jump to other websites through Baidu / Sogou and other search keywords?
JSX syntax
ModelArts-图像分类and物体检测
markdown编辑器语法——文字颜色、大小、字体与背景色的设置(转载)
使用bat自动执行cmd命令(多个命令或单个命令)