v-on事件监听

最新推荐文章于 2022-11-21 15:52:02 发布

Chueng_to

最新推荐文章于 2022-11-21 15:52:02 发布

阅读量364

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/key_cheung/article/details/108363947

版权

1.v-on绑定事件监听器（语法糖：@）

基本使用的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on</title>
</head>
<body>
<div id = "app">
  <h2>{
  {counter}}</h2>

  <!--<button v-on:click="increment">+</button>-->
  <!--<button v-on:click="decrement">-</button>-->
  <!-- v-on -> 语法糖@ -->
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      counter:0
    },
    methods:{
      increment(){
        this.counter++
      },
      decrement(){
        this.counter--
      }
    }
  })
</script>
</body>
</html>

2．v-on参数需要注意的问题

情况①：如果该方法不需要额外的参数，那么方法后面的（）可以不添加（即事件调用的方法没有参数的时候，

此时方法后有无()效果都是一致的：

情况②：但是如果方法本身有一个参数，该方法会默认将原生事件event参数传递进去；但当你需要传入一个参数，却无参数传入时方法，这时会传入一个undefined的形参进去；当方法后面()传入参数时，控制台打印出传入的参数

最低0.47元/天解锁文章

Chueng_to

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-on事件监听

1.v-on绑定事件监听器（语法糖：@）基本使用的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-on</title></head><body><div id = "app"> <h2>{{counter}}</h2> <!--<bu...
复制链接

扫一扫