vue之v-on的用法(一)

最新推荐文章于 2024-05-21 18:43:24 发布

微微笑再加油

最新推荐文章于 2024-05-21 18:43:24 发布

阅读量970

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/chd_sun/article/details/104328008

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在vue中，v-on被经常使用的一个监听方法例如对按钮点击的监听、文本框输入的监听等等。
下面是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>
<script src="../vue.js/vue.js"></script>
<body>
    <div id="app">
    //监听btn1方法
      <button @click="btn1">按钮1</button>
      //监听btn2方法，显示vue生成的event事件
      <button @click="btn2">按钮2</button>
      <button @click="btn3(123 ,$event)">按钮3</button>
    </div>
    <script>
     const app= new Vue({
        el: '#app',
        data: {
          
        },
        methods:{
            btn1(){
                console.log("btn1");
            },
            btn2(){
                console.log(event);
            },
            btn3(num, event){
                console.log(num, event);
            }
        }
    })

    </script>
</body>
</html>

点击按钮1显示的内容
在这里插入图片描述
点击按钮2显示的内容（会显示其event的时间中的各个属性）

点击按钮3显示的内容(注意：既要需要传递的参数又需要vue中产生的event事件则需要在参数之中在event属性前加上美元符号）例如

 <button @click="btn3(123 ,$event)">按钮3</button>
 ...
 methods:{
        btn3(num, event){
            console.log(num, event);
        }
  }

在这里插入图片描述

微微笑再加油

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue之v-on的用法(一)

在vue中，v-on被经常使用的一个监听方法例如对按钮点击的监听、文本框输入的监听等等。下面是v-on的使用方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
复制链接

扫一扫