v-on的参数问题、修饰符、使用

简介: v-on的参数问题、修饰符、使用

v-on的参数问题

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 事件调用的方法没有参数 -->
        <button @click="btnClick">按钮1</button>
        <button @click="btnClick()">按钮2</button>
        <!-- 在有参数的方法中,如果不带括号 -->
        <button @click="btnClick1">按钮3</button>
        <button @click="btnClick1()">按钮4</button>
        <button @click="btnClick1(123)">按钮5</button>
        <button @click="btnClick1('abc')">按钮6</button>
        <button @click="btnClick2('abc')">按钮7</button>
        <button @click="btnClick2('abc', $event)">按钮8</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
               content: "你好呀"
            },
            methods: {
                btnClick: function(){
                    alert(this.content);
                },
                btnClick1: function(abc){
                    alert(abc);
                },
                btnClick2(a, b){
                    console.log("++++++"+a+b)
                } 

            },
        })
    </script>
</body>
</html>

v-on的修饰符

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <div id="app">
        <div @click="divClick">
            <button @click="btnClick">按钮1.1</button>
            <!-- .stop -->
            <button @click.stop="btnClick">按钮1.2</button>
        </div>

        <form action="https://www.baidu.com/">
            <!--点击完后跳转-->
            <input type="submit" value="提交2.1" @click="submitClick">
            <!-- .prevent 点击完后不跳转-->
            <input type="submit" value="提交2.2" @click.prevent="submitClick">
        </form>

        <input type="text" @keyup="keyUp">
        <br>
        <!-- 监听某个键 -->
        <input type="text" @keyup.a="keyUp">
        <br>
        <!-- .once只有第一次点击有用 -->
        <button @click.once="btnClick1">按钮</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: "sb"
            },
            methods: {
                divClick: function(){
                    alert("div");
                },
                btnClick: function(){
                    alert("button");
                },
                submitClick: function(){
                    alert("submit");
                },
                keyUp: function(){
                    alert("keyWord");
                },
                btnClick1(){
                    alert("出来了");
                }
            },
        })
    </script>
</body>
</html>

v-on基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on方法处理器</title>
</head>
<body>
    <div id="con">
        <h2>当前计数:{{counter}}</h2>
        <!-- <button v-on:click="counter--">-</button>
        <button v-on:click="counter++">+</button> -->
        <!-- <button v-on:click="sub">-</button>
        <button v-on:click="add">+</button> -->
        <!-- 语法糖 -->
        <button @click="sub">-</button>
        <button @click="add">+</button>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#con",
        data: {
            counter:0
        },
        methods: {
            add: function(){
                // app.counter++
                this.counter++
            },
            sub: function(){
                // app.counter--
                this.counter--
            }
        }
    });

</script>
</html>
目录
相关文章
|
8天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1196 4
|
7天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1073 60
|
6天前
|
机器学习/深度学习 物联网
Wan2.2再次开源数字人:Animate-14B!一键实现电影角色替换和动作驱动
今天,通义万相的视频生成模型又又又开源了!Wan2.2系列模型家族新增数字人成员Wan2.2-Animate-14B。
556 11
|
17天前
|
人工智能 运维 安全
|
8天前
|
云栖大会
阿里云云栖大会2025年9月24日开启,免费申请大会门票,速度领取~
2025云栖大会将于9月24-26日举行,官网免费预约畅享票,审核后短信通知,持证件入场
1650 12
|
1天前
|
资源调度
除了nrm-pm,还有哪些工具可以管理多个包管理器的源?
除了nrm-pm,还有哪些工具可以管理多个包管理器的源?
211 127
|
8天前
|
弹性计算 Kubernetes jenkins
如何在 ECS/EKS 集群中有效使用 Jenkins
本文探讨了如何将 Jenkins 与 AWS ECS 和 EKS 集群集成,以构建高效、灵活且具备自动扩缩容能力的 CI/CD 流水线,提升软件交付效率并优化资源成本。
341 0
|
8天前
|
消息中间件 Java Apache
SpringBoot集成RocketMq
RocketMQ 是一款开源的分布式消息中间件,采用纯 Java 编写,支持事务消息、顺序消息、批量消息、定时消息及消息回溯等功能。其优势包括去除对 ZooKeeper 的依赖、支持异步和同步刷盘、高吞吐量及消息过滤等特性。RocketMQ 具备高可用性和高可靠性,适用于大规模分布式系统,能有效保障消息传输的一致性和顺序性。
479 2

热门文章

最新文章