脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → VueJS事件处理器v-on

VueJS事件处理器v-on的使用方法

 更新时间：2017年09月27日 17:03:39   作者：boonya  
本篇文章主要介绍了VueJS事件处理器v-on的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了VueJS事件处理器v-on的使用方法，分享给大家，具体如下：

事件监听可以使用 v-on 指令.

v-on:click表达式

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
 <button v-on:click="counter += 1">增加 1</button>
 <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

<script>
new Vue({
 el: '#app',
 data: {
  counter: 0
 }
})
</script>
</body>
</html>

每点一次按钮结果就增加1。

v-on:click调用方法

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <!-- `greet` 是在下面定义的方法名 -->
 <button v-on:click="greet">Greet</button>
</div>

<script>
var app = new Vue({
 el: '#app',
 data: {
  name: 'Vue.js'
 },
 // 在 `methods` 对象中定义方法
 methods: {
  greet: function (event) {
   // `this` 在方法里指当前 Vue 实例
   alert('Hello ' + this.name + '!')
   // `event` 是原生 DOM 事件
   if (event) {
     alert(event.target.tagName)
   }
  }
 }
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>
</body>
</html>

点击按钮调用greet方法。

v-on:click调用方法传递参数

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
 <button v-on:click="say('hi')">Say hi</button>
 <button v-on:click="say('what')">Say what</button>
</div>

<script>
new Vue({
 el: '#app',
 methods: {
  say: function (message) {
   alert(message)
  }
 }
})
</script>
</body>
</html>

点击按钮会提示相应的信息。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • mpvue项目中使用第三方UI组件库的方法

    mpvue项目中使用第三方UI组件库的方法

    这篇文章主要介绍了mpvue项目中使用第三方UI组件库的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue实现户籍管理系统户籍信息的添加与删除方式

    Vue实现户籍管理系统户籍信息的添加与删除方式

    这篇文章主要介绍了Vue实现户籍管理系统户籍信息的添加与删除方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • vue mint-ui tabbar变组件使用

    vue mint-ui tabbar变组件使用

    这篇文章主要介绍了vue mint-ui tabbar变组件使用方法及实例代码，非常不错具有参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • Vue input控件通过value绑定动态属性及修饰符的方法

    Vue input控件通过value绑定动态属性及修饰符的方法

    这篇文章主要介绍了 Vue input控件通过value绑定动态属性及修饰符的方法,需要的朋友可以参考下
    2017-05-05
  • vue实现表格过滤功能

    vue实现表格过滤功能

    这篇文章主要为大家详细介绍了vue实现表格过滤功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Pinia中action使用方法详解

    Pinia中action使用方法详解

    Pinia是Vue的存储库,它允许您跨组件/页面共享状态,下面这篇文章主要给大家介绍了Pinia中action使用方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • Vue路由组件传递参数的六种场景

    Vue路由组件传递参数的六种场景

    在Vue应用程序中,路由组件是构建单页应用的关键部分,传递参数给路由组件可以让我们动态地展示内容,处理用户输入,以及实现各种交互功能,本文就给大家介绍了六种Vue路由组件传递参数场景,需要的朋友可以参考下
    2023-09-09
  • Mixin混入分发Vue组件可复用功能基础示例

    Mixin混入分发Vue组件可复用功能基础示例

    这篇文章主要为大家介绍了Mixin混入分发Vue组件可复用功能基础示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • 解决vue 项目引入字体图标报错、不显示等问题

    解决vue 项目引入字体图标报错、不显示等问题

    今天小编就为大家分享一篇解决vue 项目引入字体图标报错、不显示等问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue.js 实现输入框动态添加功能

    vue.js 实现输入框动态添加功能

    这篇文章主要介绍了vue.js 实现输入框动态添加功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06

最新评论