<!-- 完整語法 --> <a v-on:click="doSomething">...</a> <!-- 縮寫 --> <a @click="doSomething">...</a> <!-- 動態參數的縮寫 (2.6.0+) --> <a @[event]="doSomething"> ... </a>
當 event 的值為 "focus" 時，v-on:[eventName] 將等價於 v-on:focus。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-on 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <style> .red { color: red; } img { width: 100px; height: 100px; } </style> <body> <div id="app"> <button v-on:click="fun()"> 點我修改數據</button> <!-- v-on也要有一個簡寫的方式 就是@ --> <button @click="handleClose"> 點我修改數據</button> <p>{{text}}</p> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { text: true }, // 在與el屬性和data屬性的同級 使用methods來進行方法的定義 methods: { fun() { // 要把當前的text的值取反 this指向的就是vue實例 this.text = !this.text; console.log(this.text); }, handleClose: function() { this.text = !this.text; console.log(this.text); } } }) </script>