<!doctype html> <html> <head> <meta charset="UTF-8"> <title>事件绑定</title> <script src="js/vue.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <h5>表单提交</h5> <form v-on:submit.prevent="handleSubmit"> <input type="checkbox" v-bind:checked="isChecked" v-on:click="handleDisabled"/> 是否同意本站协议 <br> <button v-bind:disabled="isDisabled">提交</button> </form> </div> <script> new Vue({ el:"#container", data:{ msg:"Hello VueJs", isDisabled:false, isChecked:false }, //methods对象 methods:{ //通过methods来定义需要的方法 handleDisabled:function(){ this.isChecked = !this.isChecked; if(this.isChecked==true){ this.isDisabled = true; } else{ this.isDisabled = false; } } } }) </script> </body> </html>