您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關Vue.js如何實現雙向數據綁定方法的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
1、能夠嵌入動態文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數據被提交到服務器之前驗證數據。5、檢測訪客的瀏覽器信息。6、控制cookies,包括創建和修改等。7、基于Node.js技術進行服務器端編程。
1、使用Vue.js實現雙向表單數據綁定,例子
<!--html代碼--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>財產查勘處理</title> <link rel="stylesheet" type="text/css" href="../css/global.css" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="../css/AdminLTE.min.css" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="../css/propertySurvey.css" rel="external nofollow" /> </head> <body> <div class="container-fluid"> <div >請輸入物損查看信息</div> <h5 class="box-title"> <i class="glyphicon glyphicon-play-circle" ></i> 報案信息 </h5> <hr /> <div class="row text-center" > <div > <label>損失方</label><input v-model="RegistInfo_name" type="text" name="RegistInfo_name"/> </div> <div > <label>聯系人</label><input v-model="RegistInfo_user" type="text" name="RegistInfo_user"/> </div> <div > <label>聯系方式</label> <input v-model="RegistInfo_phone" name="RegistInfo_phone" type="text"/> </div> </div> <div class="row text-center" > <div > <label>損失方1</label><input v-model="Prplregist_name" type="text" name="Prplregist_name"/> </div> <div > <label>聯系人1</label><input v-model="Prplregist_user" type="text" name="Prplregist_user"/> </div> <div > <label>聯系方式1</label> <input v-model="Prplregist_phone" name="Prplregist_phone" type="text"/> </div> </div> <div class="row text-center" > <div > <label>查勘估損金額</label> <input v-model="RegistInfo_chakan_money" name="RegistInfo_chakan_money" type="text" value="400.00" /> * </div> <div > <label>施救費金額</label> <input v-model="RegistInfo_rescue_money" name="RegistInfo_rescue_money" type="text" name="" id="" value="0.00" /> </div> <div > <label>需要施救</label> <input type="checkbox" />是否需要 </div> </div> <div class="row text-center" > <div > <label>查勘估損金額1</label> <input v-model="Prplregist_chakan_money" name="Prplregist_chakan_money" type="text" value="400.00" /> * </div> <div > <label>施救費金額1</label> <input v-model="Prplregist_rescue_money" name="Prplregist_rescue_money" type="text" name="" id="" value="0.00" /> </div> <div > <label>需要施救1</label> <input type="checkbox" />是<input type="checkbox" />沒錯<input type="checkbox" />必須 </div> </div> <div class="row text-center" > <div > <label>查勘地點</label> <input v-model="address" name="address" type="text" /> * </div> <div > <label>查勘日期</label> <input v-model="RegistInfo_chakan_data" name="RegistInfo_chakan_data" type="text" name="" id="" value="2017-03-09" /> </div> </div> <div class="row text-center" > <div > <label>施救過程描述</label> <input v-model="RegistInfo_say" name="RegistInfo_say" type="text" /> </div> </div> <div class="row text-center" > <div > <label>備注</label> <input v-model="remark" name="remark" type="text" /> </div> </div> <div class="row text-center" > <div > <select class="select2"> <option value="123" id="sel1">123</option> <option value="456" id="sel2">456</option> <option value="789" id="sel3">789</option> </select> </div> </div> <div class="row text-center" > <div > <input type="radio" id="google" value="Google" v-model="RegistInfo_radio" name="RegistInfo_radio"> <label for="google">Google</label> <br> <input type="radio" id="runoob" value="Runoob" v-model="RegistInfo_radio" name="RegistInfo_radio"> <label for="runoob">Runoob</label> </div> </div> <div class="row text-center" > <div > <input type="radio" id="helongjun" value="helongjun" v-model="RegistInfo_helongjun" name="RegistInfo_helongjun"> <label for="helongjun">helongjun</label> <br> <input type="radio" id="longjun" value="longjun" v-model="RegistInfo_helongjun" name="RegistInfo_helongjun"> <label for="longjun">longjun</label> </div> </div> <div class="row text-center" > <div > <input type="radio" id="testOne" value="testOne" v-model="testOne" name="testOne"> <label for="helongjun">testOne</label> <br> <!--<input type="radio" id="testOne" value="testTwo" v-model="testOne" name="testOne"> <label for="longjun">testTwo</label>--> </div> </div> <div class="row text-center" > <div > <select v-model="RegistInfo_selected" name="RegistInfo_selected"> <option value="">選擇一個網站</option> <option value="baidu">baidu</option> <option value="google">Google</option> </select> </div> </div> <div class="text-center row"> <button>暫存(S)</button> <button onclick="getInputVal()">返回(F)</button> </div> </div> <script type="text/javascript" src="../js/vue.min.js" ></script> <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="../js/bootstrap.min.js"></script> <script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script> <script type="text/javascript" src="../VueFormSub.js" ></script>
#VueFormSub.js(實現雙向綁定主要代碼) //實現取值 var VueFormSub = function(formid){ this.$form = ($("#" + formid).length !=0)?$("#" + formid):$("."+formid); var models = $("*[v-model != '']", this.$form); var vueData = {}; $.each(models,function(idx,dom){ var key = $(dom).attr("name"); if (undefined != key){ var dValue = $(dom).val(); $(dom).val(dValue); var beanName = key.split("_"); if(beanName.length < 2){ vueData[beanName] = dValue; vueData[beanName] = $("input[type='radio'][name='"+key+"']:checked").val(); }else{ if(vueData[beanName[0]] == undefined){ vueData[beanName[0]] = {}; }else{ if($(dom).attr("type") == "radio"){ var tempVal = $("input[type='radio'][name='"+key+"']:checked").val(); vueData[beanName[0]][beanName[1]] = tempVal; }else{ vueData[beanName[0]][beanName[1]]=dValue; } } } } }); return vueData; }; #初始化Vue表單數據(可以只傳入initDate數據源,formid需要綁定的dom) VueFormSub.initVue = function(initDate,formid,httpMethod, url, params){ if(initDate instanceof Object){ /*if(initDate.length !=0){}*/ var initJson = VueFormSub.ObjConvert(initDate); new Vue({ el : ($("#"+formid).length != 0)?'#'+formid:'.'+formid, data : initJson }); }else{ if (httpMethod != "get" && params && typeof (params) == "object"){ params = JSON.stringify(params); } if(params!= null){ params.rs = Math.random(); }else{ params = {'rs':Math.random()}; } $.ajax({ type: httpMethod, url: "/cxh" + url, data: params, cache:false, async: true, contentType: 'application/json', dataType: 'json', success: function (returnData) { if(returnData.length != 0){ var vueDate = VueFormSub.ObjConvert(returnData); new Vue({ el:($("#"+formid).length != 0)?'#'+formid:'.'+formid, data : vueDate }); } } }); } }; #對需要綁定的對象進行解析成Vue支持的格式 VueFormSub.ObjConvert = function(dataObj){ var json = {}; $.each(dataObj,function(id,param){ if(param instanceof Object){ $.each(param, function(rid,rparam){ if(rparam instanceof Object){ json[id] = VueFormSub.ObjConvert(param); }else{ json[id+"_"+rid] = rparam; } }); }else{ json[id]=param; } }); return json; };
#使用實例 <script> #初始化數據data var initVue = { RegistInfo_name : 'legend', RegistInfo_user : '龍軍', RegistInfo_phone : '1008611', RegistInfo_chakan_money : '100', RegistInfo_rescue_money : '1000', address : '廣東省汕頭市潮南區', RegistInfo_chakan_data : '2017-5-7', RegistInfo_say : '這個只是測試用的', remark : '龍軍用來測試的', Prplregist_name : '林總', Prplregist_user : '林老板', Prplregist_phone : '10010', Prplregist_chakan_money : '一萬塊', Prplregist_rescue_money : '一個億', RegistInfo_radio : "Runoob", RegistInfo_selected : "google", RegistInfo_helongjun : "helongjun", testOne:"" }; //初始化Vue表單 VueFormSub.initVue(initVue,"container-fluid"); //返回按鈕單擊 function getInputVal(){ //調用自動表單封裝 var resultVal = new VueFormSub("container-fluid"); console.log(resultVal); } #注意:input表單中的name屬性必須指定,最好和input表單中的v-model的值一樣 <script>
最終效果:
感謝各位的閱讀!關于“Vue.js如何實現雙向數據綁定方法”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。