1、使用Vue.js实现双向表单数据绑定，例子
<!--html代码--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>财产查勘处理</title> <link type="text/css" href="https://www.jb51.net/css/global.css" /> <link type="text/css" href="https://www.jb51.net/css/bootstrap.min.css" /> <link type="text/css" href="https://www.jb51.net/css/AdminLTE.min.css" /> <link type="text/css" href="https://www.jb51.net/css/propertySurvey.css" /> </head> <body> <div> <div>请输入物损查看信息</div> <h4> <i></i> 报案信息 </h4> <hr /> <div> <div> <label>损失方</label><input v-model="RegistInfo_name" type="text"/> </div> <div> <label>联系人</label><input v-model="RegistInfo_user" type="text"/> </div> <div> <label>联系方式</label> <input v-model="RegistInfo_phone" type="text"/> </div> </div> <div> <div> <label>损失方1</label><input v-model="Prplregist_name" type="text"/> </div> <div> <label>联系人1</label><input v-model="Prplregist_user" type="text"/> </div> <div> <label>联系方式1</label> <input v-model="Prplregist_phone" type="text"/> </div> </div> <div> <div> <label>查勘估损金额</label> <input v-model="RegistInfo_chakan_money" type="text" value="400.00" /> * </div> <div> <label>施救费金额</label> <input v-model="RegistInfo_rescue_money" type="text" value="0.00" /> </div> <div> <label>需要施救</label> <input type="checkbox" />是否需要 </div> </div> <div> <div> <label>查勘估损金额1</label> <input v-model="Prplregist_chakan_money" type="text" value="400.00" /> * </div> <div> <label>施救费金额1</label> <input v-model="Prplregist_rescue_money" type="text" value="0.00" /> </div> <div> <label>需要施救1</label> <input type="checkbox" />是<input type="checkbox" />没错<input type="checkbox" />必须 </div> </div> <div> <div> <label>查勘地点</label> <input v-model="address" type="text" /> * </div> <div> <label>查勘日期</label> <input v-model="RegistInfo_chakan_data" type="text" value="2017-03-09" /> </div> </div> <div> <div> <label>施救过程描述</label> <input v-model="RegistInfo_say" type="text" /> </div> </div> <div> <div> <label>备注</label> <input v-model="remark" type="text" /> </div> </div> <div> <div> <select> <option value="123">123</option> <option value="456">456</option> <option value="789">789</option> </select> </div> </div> <div> <div> <input type="radio" value="Google" v-model="RegistInfo_radio"> <label for="google">Google</label> <br> <input type="radio" value="Runoob" v-model="RegistInfo_radio"> <label for="runoob">Runoob</label> </div> </div> <div> <div> <input type="radio" value="helongjun" v-model="RegistInfo_helongjun"> <label for="helongjun">helongjun</label> <br> <input type="radio" value="longjun" v-model="RegistInfo_helongjun"> <label for="longjun">longjun</label> </div> </div> <div> <div> <input type="radio" value="testOne" v-model="testOne"> <label for="helongjun">testOne</label> <br> <!--<input type="radio" value="testTwo" v-model="testOne"> <label for="longjun">testTwo</label>--> </div> </div> <div> <div> <select v-model="RegistInfo_selected"> <option value="">选择一个网站</option> <option value="baidu">baidu</option> <option value="google">Google</option> </select> </div> </div> <div> <button>暂存(S)</button> <button>返回(F)</button> </div> </div> <script type="text/javascript" src="https://www.jb51.net/js/vue.min.js" ></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap-datetimepicker.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/VueFormSub.js" ></script>