vue事件监听

v-on

复制代码
<!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">
        <p>{{count}}</p>
        <div><input type="button" value="-" v-on:click="sub"> <input type="button" value="+" @click="add"></div>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                count:0,
            },
            methods:{
                add(){
                    this.count++
                },
                sub(){
                    this.count--
                }
            }
        })

    </script>
</body>
</html>
复制代码

 

v-on参数

复制代码
<!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">
        <p>{{count}}</p>
        <!-- 绑定事件是不需要传参的括号可省略 -->
        <div>
            <input type="button" value="按钮1" v-on:click="sub()"> 
            <input type="button" value="按钮2" @click="add">
            <!-- 需要传参时，写小括号不写参数，则传参时undefind。 不写小括号则传参点击事件对象 -->
            <input type="button" value="按钮3" @click="btnclick">
            <!-- 传参时需要普通参数和事件对象   $event事件参数 -->
            <input type="button" value="按钮4" @click="btnclick1('123', $event)">
        </div>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                count:0,
            },
            methods:{
                add(){
                    this.count++
                },
                sub(){
                    this.count--
                },
                btnclick(da){
                    console.log(da)
                },
                btnclick1(da, event){
                    console.log(da, event)
                }
            }
        })

    </script>
</body>
</html>
复制代码

 

v-on修饰符

复制代码
<!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">
        <!-- 阻止冒泡事件 -->
        <div @click="divclick">
            aaaaaaaaaaa
        <input value="button" type="button" @click.stop="btmclick"></input>
        </div>
        <!-- 表单自己提交 -->
        <form action="baidu">
            <input type="submit" value="提交" @click.prevent="submitclick">
        </form>
        <!-- 监听某个键的键帽 -->
        <input type="text" @keyup.enter="keyup"></input>
        <!-- 只触发一次 -->
        <input value="button" type="button" @click.once="btmclick"></input>

    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                count:0,
            },
            methods:{
                btmclick(){
                    console.log("按钮点击")
                },
                divclick(){
                    console.log("div点击")
                },
                submitclick(){
                    console.log("表单提交")
                },
                keyup(){
                    console.log("键盘抬起")
                }
            }
        })

    </script>
</body>
</html>
复制代码

 

posted @   Wchime  阅读(42)  评论(0)  编辑  收藏  举报
相关博文：
·  vue插槽
·  vue条件判断循环
·  前端学习-vue学习003-事件监听
·  vuejs3.0 从入门到精通——Vue语法——绑定事件监听器（v-on）
·  vue绑定事件
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话
点击右上角即可分享
微信分享提示
AI IDE Trae