1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue的單擊事件</title> 6 <script type="text/javascript" src="./js/vue.js"></script> 7 <script type="text/javascript"> 8 9 window.onload = function(){ 10 11 var app = new Vue({ 12 el:".c", 13 data:{ 14 15 //定義計數器 16 counter:0, 17 18 } 19 }); 20 } 21 22 </script> 23 24 </head> 25 <body> 26 <div class="c"> 27 <!-- 定義一個按鈕，使用counter做累加--> 28 <button v-on:click="counter += 1"><font size="2" color="blue">+</font></button> 29 <input type="text" v-model="counter" style="width: 40px;background-color: pink;text-align:center" /> 30 <button v-on:click="counter -= 1"><font size="2" color="blue">-</font></button> 31 </div> 32 </body> 33 </html>