VueJS事件處理器v-on的使用方法
更新時間：2017年09月27日 17:03:39 作者：boonya
本篇文章主要介紹了VueJS事件處理器v-on的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了VueJS事件處理器v-on的使用方法，分享給大家，具體如下：
事件監(jiān)聽可以使用 v-on 指令.
v-on:click表達(dá)式
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>這個按鈕被點(diǎn)擊了 {{ counter }} 次。</p>
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
</body>
</html>
每點(diǎn)一次按鈕結(jié)果就增加1。
v-on:click調(diào)用方法
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` 在方法里指當(dāng)前 Vue 實例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接調(diào)用方法
app.greet() // -> 'Hello Vue.js!'
</script>
</body>
</html>
點(diǎn)擊按鈕調(diào)用greet方法。
v-on:click調(diào)用方法傳遞參數(shù)
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>
點(diǎn)擊按鈕會提示相應(yīng)的信息。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了mpvue項目中使用第三方UI組件庫的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue實現(xiàn)戶籍管理系統(tǒng)戶籍信息的添加與刪除方式
這篇文章主要介紹了Vue實現(xiàn)戶籍管理系統(tǒng)戶籍信息的添加與刪除方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue mint-ui tabbar變組件使用方法及實例代碼，非常不錯具有參考借鑒價值,需要的朋友可以參考下2018-05-05
Vue input控件通過value綁定動態(tài)屬性及修飾符的方法
這篇文章主要介紹了 Vue input控件通過value綁定動態(tài)屬性及修飾符的方法,需要的朋友可以參考下2017-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)表格過濾功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),下面這篇文章主要給大家介紹了Pinia中action使用方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
在Vue應(yīng)用程序中,路由組件是構(gòu)建單頁應(yīng)用的關(guān)鍵部分,傳遞參數(shù)給路由組件可以讓我們動態(tài)地展示內(nèi)容,處理用戶輸入,以及實現(xiàn)各種交互功能,本文就給大家介紹了六種Vue路由組件傳遞參數(shù)場景,需要的朋友可以參考下2023-09-09
Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例
這篇文章主要為大家介紹了Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
今天小編就為大家分享一篇解決vue 項目引入字體圖標(biāo)報錯、不顯示等問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue.js 實現(xiàn)輸入框動態(tài)添加功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06