vue点击事件总结

最新推荐文章于 2024-04-20 23:52:14 发布

管理界的扫地僧

最新推荐文章于 2024-04-20 23:52:14 发布

阅读量1.5w

点赞数

分类专栏：日常总结

本文链接：https://blog.csdn.net/weixin_48181168/article/details/118395408

版权

日常总结专栏收录该内容

20 篇文章 3 订阅

订阅专栏

@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>

管理界的扫地僧

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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-model.number="age" 将输入的值变为数字,...
复制链接

扫一扫