Vue.js實現雙向資料繫結（表單自動賦值、表單自動取值）
阿新 • • 發佈：2019-02-06
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" />
<link rel="stylesheet" #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>最終效果：
