從資料庫獲取到json資料,前端用vue.js資料繫結
阿新 • • 發佈:2019-01-02
function userinfor() {
$.get("http://127.0.0.1:8082/lzghcg/user/userShows",
function(result, state) {
//這裡顯示從伺服器返回的資料
new Vue({
el:'#userinfor',
data:{//data就是資料,主要繫結的資料
lists:result
}
})
//這裡顯示返回的狀態
// alert(state);
/*dynamicTable(result)*/
})
}
使用vue的時候必須要建立一個vue的物件,
el是主要渲染到哪裡去,就是html中css的id意思。
data:就是要渲染的資料,json資料哦
主要用到的是v-text指令
這個指令呢v-後面接的是類似一個方法的東西。官網有介紹。
就到了前臺的繫結的資料了
此時候,還要用到一個v-for
vue中迴圈語句呢
<tbody id ="userinfor">
<tr v-for="list in lists">
<td width="30px" align="center"><input type="checkbox"
name="checkbox" / style="margin: 0px"></td>
<td v-text="list.username"></td>
<td v-text="list.memo"></td>
</tr>
<tr>
<td width="30px" align="center"><input type="checkbox"
name="checkbox" / style="margin: 0px"></td>
<td>admin</td>
<td>123</td>
<td>3</td>
<td><span class="redtitle" title="刪除議題" onclick="">編輯</span>
<span class="redtitle" title="刪除議題" onclick="">刪除</span></td>
</tr>
<tr>
<td width="30px" align="center"><input type="checkbox"
name="checkbox" / style="margin: 0px"></td>
<td>lee</td>
<td>1</td>
<td>3</td>
<td><span class="redtitle" title="刪除議題" onclick="">編輯</span>
<span class="redtitle" title="刪除議題" onclick="">刪除</span></td>
</tr>
</tbody>
紅色是關鍵,但是我這樣子 做的時候繫結就沒有問題了,估計也會遇到一個問題 ,就是用最簡單繫結資料的時候,會出現先載入你的頁面才去呼叫vue.js才去幫你繫結。因為我是通過ajax去獲取到資料,繫結的。不能用{{}}這種格式去繫結。只能去用v-text.
下面是個失敗的例子
<!-- <div id="userinfor">
<ul><li v-for="list in lists">
{{list.username}}
</li></ul>
</div> -->
反而頁面會出現一個
{{list.username}}
這個東西,過一會才有值出現。
我也不知道再怎麼去解決它。最後我介紹我怎麼去Java後臺處理裡面的值,看看 就好哈哈哈哈哈
var newVuedate = null;
function dynamicTable(result) {
var data = result;//取到一個json資料
if (data == null) {
return;
}
var datavue = [];
for (var i = 0; i < data.length; i++) {//json類似一個數組,所以通過迴圈輸出裡面
var objproject = {
"id" : result[i].id,//這個是賦值到一個數組物件裡面去,開發的時候就是取到裡面的值進行一個邏輯判斷,要幹嘛幹嘛的。這個也加上他的下標
"username" : result[i].username,/我可以給個例子看看明天吧
"password" : result[i].password,
"createdate" : result[i].createdate,
"dele" : result[i].dele,
"memo" : result[i].memo
}
datavue.push(objproject);
}
if (newVuedate == null) {
newVuedate = new Vue({
el : '#userinfor',
data : {
lists : datavue
}
});
} else {
newVuedate.lists = datavue
}
}
這個呢,就是初始化vue的東西,大神告訴我,為啥綁不上去,就是還沒有初始化vue呢不知道是不是這樣子。