前端框架 VUE-事件处理（事件修饰符，按键修饰符）（五）

最新推荐文章于 2024-08-07 09:03:59 发布

C-先生

最新推荐文章于 2024-08-07 09:03:59 发布

阅读量145

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44100514/article/details/99547228

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

绑定监听

v-on:xxx=“fun”
@xxx=“fun”
@xxx=“fun(参数)”
默认事件形参: event
隐含属性对象: $event

事件修饰符

.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()

按键修饰符

keycode : 操作的是某个 keycode 值的键
.keyName : 操作的某个按键名的键(少部分)

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>


</style>
<script src="/vue.min.js"></script>

<body>
<div id="demo">
    <button @click="test1">test1</button>
    <button @click="test2">test2</button>
    <button @click="test3(123,$event)">test3</button>


    <h2>事件修饰符</h2>

    <div style="width: 200px;height: 200px;background: red" @click="test5">
        <!-- 停止事件冒泡 -->
        <div style="width: 100px;height: 100px;background: green" @click.stop="test6"></div>

    </div>
    <!-- 阻止事件的默认行为  prevent -->
    <a href="https://www.baidu.com/" @click.prevent="test7">去百度，我就不去</a>

    <h2>按键修饰符</h2>

    <input type="text" @keyup.13="test8" />
    <input type="text" @keyup.enter="test8" />


</div>


</body>

<script>

    new Vue({

        el:'#demo',
        data:{
            test1(){
                alert("test1");
            },
            test2(){
                alert("test2");
            },
            test3(num, $event){
                alert(num + '---' + event.target.innerHTML);
            },
            test5(){
                alert("out");
            },
            test6(){
                //event.stopPropagation();
                alert("inner");
            },
            test7(){
                //event.preventDefault();
                alert("success")
            },
            test8(event){
               /* if(event.keyCode==13){

                }*/
                alert(event.target.value)
            }

        }

    })

</script>

</html>

C-先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端框架 VUE-事件处理（事件修饰符，按键修饰符）（五）

绑定监听v-on:xxx=“fun”@xxx=“fun”@xxx=“fun(参数)”默认事件形参: event隐含属性对象: $event事件修饰符.prevent : 阻止事件的默认行为 event.preventDefault().stop : 停止事件冒泡 event.stopPropagation()按键修饰符keycode : 操作的是某个 keycode ...
复制链接

扫一扫

专栏目录