<!doctype html> <html> <head> <meta charset="UTF-8"> <title>事件綁定</title> <script src="js/vue.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <button v-on:click="handleClick">Click Me</button> <button @click="handleClick">Click Me</button> <h5>select</h5> <select v-on:change="handleChange"> <option value="red">紅色</option> <option value="green">綠色</option> <option value="pink">粉色</option> </select> <h5>表單提交</h5> <form v-on:submit.prevent="handleSubmit"> <input type="checkbox" :checked="false" v-on:click="handleDisabled"/> 是否同意本站協議 <br> <button :disabled="isDisabled">提交</button> </form> </div> <script> new Vue({ el:"#container", data:{ msg:"Hello VueJs", isDisabled:false }, //methods對象 methods:{ //通過methods來定義需要的方法 handleClick:function(){ console.log("btn is clicked"); }, handleChange:function(event){ console.log("選擇了某選項"+event.target.value); }, handleSubmit:function(){ console.log("觸發事件"); }, handleDisabled:function(e){ if(event.target.checked==true){ this.isDisabled = true; } else{ this.isDisabled = false; } } } }) </script> </body> </html>