Vue.js v-on:click
範例一：點擊後呼叫下方clickme function。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<input type="submit" value="立即送出" v-on:click="clickme" style="cursor:pointer">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script>
new Vue({
el:'#app',
methods:{
clickme: function(){
alert("You click 立即送出!");
}
}
});
</script>
</body>
</html>範例二：計算點擊次數。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<p>目前已點擊：{{count}}次</p>
<input type="submit" value="立即送出" v-on:click="clickme" style="cursor:pointer">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
count:0
},
methods:{
clickme: function(){
this.count += 1;
}
}
});
</script>
</body>
</html>範例三：分別按下兩個按鈕，會跳出不一樣的文字視窗，但是是共用相同的function，所以說就是要可以丟參數進去function裡。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<button v-on:click="handleIt('uh')" style="cursor:pointer">I say uh</button>
<button v-on:click="handleIt('ah')" style="cursor:pointer">you say ah</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script>
new Vue({
el:'#app',
methods:{
handleIt: function(msg){
alert(msg)
}
}
});
</script>
</body>
</html>參考：［教學］Vue js快速上手（四）Vue.js要如何v-on:click | YOTTA友讀——陪你成長的學習夥伴｜跨領域線上學習平台 (yottau.com.tw)