vue（修饰符once，prevent，stop，监听键盘按键（keyup，keydown））

最新推荐文章于 2024-05-16 19:06:13 发布

小青龙8085

最新推荐文章于 2024-05-16 19:06:13 发布

阅读量2.6k

点赞数

分类专栏： vue 前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/103214149

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

vue

35 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root" >
			<!--修饰符stop，阻止冒泡，当点击button的时候不会触发外面div的click1-->
			<div @click="click1">
				aaaaaa
				<button @click.stop="click2">按钮1</button>
			</div>
			<!--修饰符prevent，阻止提交，并且执行submitClick-->
			<form action="baidu">
				<input type="submit" value="提交" @click.prevent="submitClick" />
			</form>
			<!--监听键盘上某个按钮是否按下，@key（up松开，down按下）.（enter  enter键，j  j键），当按下或松开某个键的时候触发事件keyUp-->
			<input type="text" @keydown.enter="keyUp" />
			
			<!--修饰符once，只触发一次-->
			<button @click.once="click1">按钮</button>
        </div> 
        <script>
            new Vue({
                el:"#root",
                data:{
					a:100
                },
                methods:{
                    click1(){
						console.log("click1");
					},
					click2(){
						console.log("click2");
					},
					submitClick(){
						console.log("submitClick");
					},
					keyUp(){
						console.log("keyUp");
					},
					click3(a,event){
						console.log(a,event);
					}
                }
            })
        </script>
    </body>
</html>

小青龙8085

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue（修饰符once，prevent，stop，监听键盘按键（keyup，keydown））

直接上代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </hea...
复制链接

扫一扫