這篇文章將為大家詳細講解有關vue中怎么利用v-on指令監聽事件，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="count += 1">點擊測試</button>
<p>這個按鈕被點擊了{{count}}次</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
count:0
}
})
</script>
</html>下面再看看監聽方法事件的代碼示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="test">點擊測試</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
name: 'Vue.js'
},
// 在 `methods` 對象中定義方法
methods: {
test: function (event) {
// `this` 在方法里指當前 Vue 實例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
</script>
</html>內聯處理器方法，內聯javaScript語句
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="say('say hello')">say hello</button>
<button v-on:click="say('say goodbye')">say goodbye</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
name: 'Vue.js'
},
// 在 `methods` 對象中定義方法
methods: {
say:function(message){
alert(message)
}
}
})
</script>
</html>關于vue中怎么利用v-on指令監聽事件就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
