本文共 1013 字，大约阅读时间需要 3 分钟。

v-on的使用

个人博客

Vue系列

上一篇：

下一篇：

v-on的使用

在第一篇，Vue的初体验中，我们已经使用过v-on来为元素添加点击事件了，下面我们将较为详细的来了解它。

基础使用

下面我们演示给一个button绑定点击事件：

      
       
               
   
      
    test    
   
      

我们可以看到用法非常简单，在methods中定义一个方法，然后用v-on调用即可。

v-on的语法糖

语法糖就是一种较为简便的写法，我们可以使用@来代替v-on，原代码可修改为：

test

v-on传参

我们在声明方法的时候，也可以要求调用者传一个参数进来，如下：

methods: {        btnTest: function (num) {          console.log(num);        },      },

我们的btnTest要求调用者传一个参数进来，因此在用v-on指令调用该方法时，我们可以传一个参数给它。

test

完整代码如下：

      
       
               
   
      
    test    
   
      

测试结果：

点击test按钮以后，控制台打印输出10。

现在又有个问题了，如果我的方法需要一个参数，而我调用时不传这个参数给它呢？会有下面这两种情况:

第一种情况，调用btnTest时，不加括号，如下： 这时候传入的参数是一个点击事件的对象，浏览器打印结果如下： 如果加上括号： 则不会传入参数，event是undefined,浏览器打印结果如下：

v-on传多个参数同时传入event的方法

如果我们的方法要传入多个方法，同时我们也想传入event时间，如：

btnTest: function (num,event) {          console.log(event);        }

这时候我们可以通过$event来讲事件传入：

test

完整代码如下：

      
       
               
   
      
    test    
   
      

总结

事件肯定不只点击事件一种，当然点击事件几乎也是最常用的，其他事件这里不一一累述，用法基本上是相同的，用到的时候再去翻阅官方文档即可。

转载地址：http://xbtzi.baihongyu.com/