<!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>