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>
点击按钮会提示相应的信息。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
页面内容太多会导致加载速度过慢,这时可考虑使用滚动加载即还没有出现在可视范围内的内容块先不加载,出现后再加载,所以本文给大家介绍了基于vue实现页面滚动加载的示例,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了vue动态组件实现选项卡切换效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
本文主要介绍了vue-element-admin下载到登录的一些坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了vue3如何使用ref获取元素，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家详细介绍了如何利用Vue实现多点涂鸦效果，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以跟随小编一起学习一下2023-03-03
在Vue3中,ref提供了访问组件内DOM元素和子组件实例的方法,防抖是一种限制函数调用频率的方法,即在一定时间内多次触发同一个函数,只执行最后一次触发的函数,本文将给大家介绍了Vue3如何利用自定义ref实现防抖,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了vue百度地图修改折线颜色,添加icon和文字标注方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了el-menu弹出菜单样式不生效的问题及解决方法,修改弹出框元素不在 el-menu 样式中,我们需要在 el-menu–popup 中修改样式,具体操作代码跟随小编一起看看吧2024-07-07
Vue项目之安装引入使用vconsole方式(生产环境不显示)
在Vue2开发中,引入vConsole可以为移动端提供类似浏览器F12的调试工具,支持查看日志、网络请求等功能,vConsole是一个轻量、可拓展的前端调试面板,与框架无关,适用于多种前端框架,安装方法包括npm和CDN两种,可根据项目环境配置是否显示调试面板2024-10-10
这篇文章主要介绍了vue样式穿透 ::v-deep的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
最新评论