vue点击事件总结

@click.once="clickA" 只允许点击一次@click.stop="clickB" 阻止事件冒泡v-on:keyup.delete="clearFn" 点击delete键清空v-on:keyup.enter="clearFn" 点击enter键清空v-on:keyup.enter.65="teamFn" 使用组合键v-model.lazy.trim="msg" 清空前后的空格效果v-

文章共745字 · 阅读需要大约3分钟

一键AI生成摘要，助你高效阅读

问答

打小又皮又闹

15751人浏览 · 2021-07-01 19:40:22

打小又皮又闹 · 2021-07-01 19:40:22 发布

@click.once = "clickA" 只允许点击一次

@click.stop = "clickB" 阻止事件冒泡

v-on:keyup.delete="clearFn" 点击delete键清空

v-on:keyup.enter="clearFn" 点击enter键清空

v-on:keyup.enter.65="teamFn" 使用组合键

v-model.lazy.trim="msg" 清空前后的空格效果

v-model.number="age" 将输入的值变为数字,相加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #idA{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
        #idB{
            width: 100px;
            height: 100px;
            background-color: red;
            text-align: center;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- @事件名.prevent 阻止默认事件 -->
        <a href="http://www.baidu.com">百度 -1</a><br>
        <a href="http://www.baidu.com" @click.prevent>百度 -2</a>
        <!-- @click  stop  阻止冒泡
             once 只能点击一次
             修饰符: delete 代表点击了delete
        -->
        <div  :id="idA" @click.once = "clickA">
            A
            <div :id="idB" @click.stop = "clickB">B</div>
        </div>
        <hr>
        用户名:<input type="text" v-model="username" v-on:keyup.delete="clearFn">
        <hr>
        用户名:<input type="text" v-model="username" v-on:keyup.enter="clearFn">
        <hr>
        用户名:<input type="text"  v-on:keyup.enter.65="teamFn">

        <p>{{msg}}</p> 
        <!-- lazy  相当于是 由原来的input事件
        变为onchange事件  -->
        <input type="text" v-model.lazy.trim="msg">
            <p>{{age + 10}}</p>
            <input type="text" v-model.number="age">
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"消息",
                age:1,
                username:"键盘事件",
                idA:"idA",
                idB:"idB",
            },
            methods: {
                teamFn(){
                    console.log("组合键");
                },
                clearFn(){
                    // delete点击清空
                    this.username=''
                    console.log("点击了- keyup");
                },
                clickA(){
                    console.log("A---点击了");
                },
                clickB(){
                    console.log("B---点击了");
                }
            },
        })
    </script>
</body>
</html>

自定义事件的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" @keydown.sss ="handle" v-model="msg">
    </div>
    <script src="../vue.js"></script>
    <script>
        Vue.config.keyCodes.sss = 83
        new Vue({
            el:"#app",
            data:{
                msg:"消息"
            },
            methods: {
                handle(event){
                    console.log("调用了",event.keyCode);
                }
            },
        })
    </script>
</body>
</html>