当前位置:网站首页>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>
边栏推荐
- Oracle automatic storage management (ASM)
- 当 std::bind 遇上 this
- Day04 routing layer
- js字符串转对象 js对象转字符串 js字符串与对象互转
- MoveIt2——4.机器人模型和机器人状态
- Moveit2——1.开始
- Cve-2022-34265 Django extract & TRUNC SQL injection vulnerability recurrence
- [GFCTF 2021]Baby_ Cve-2021-41773 on the web
- Day11 serializer
- JS string to object JS object to string JS string to object
猜你喜欢

Uni app wechat applet - Mall (7) - Product Details

MoveIt2——4.机器人模型和机器人状态

Initial flask

鼠标右键菜单添加快速打开选项遇见的错误:

JSX 语法

Summary of XML external entity injection (xxE target recurrence)

Collection and summary of penetration test information

everything搜索不到startup_lpc11x.s文件
![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

uni-app微信公众号(5)——新增、修改地址
随机推荐
js截取字符串前几位或者截取字符串后几位
Day16 sorting, current limiting
uni scroll-view 下拉刷新
小程序嵌入网页向小程序跳转并传参,微信小程序中实现公众号授权获取openId
VsCode建立非工程目录下的头文件自动查找
Maker-鸿蒙应用开发培训笔记02
Initial flask
(10)文件包含
Uni app wechat applet - Mall (4) - merchants
[GFCTF 2021]Baby_ Cve-2021-41773 on the web
uniapp调用地图,进行位置查询,标记定位
The C Programming Language (2nd)--笔记--1.7
gtest与gmock的安装与使用
JS intercepts the first few digits of the string or the last few digits of the string
uni-app微信小程序——商城(7)——商品详情
Day07 ORM table relationship and operation
sql语句学习和pymysql的使用
【ElenmentUI el-date-picker日期选择器,结束时间不得早于开始时间,且只能选择距开始时间指定天数的日期】
(6) Test command
自己封装的风格化的开关卡片组件