從數據庫獲取到json數據,前端用vue.js數據綁定

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="刪除議題" οnclick="">編輯</span>
												<span class="redtitle" title="刪除議題" οnclick="">刪除</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="刪除議題" οnclick="">編輯</span>
												<span class="redtitle" title="刪除議題" οnclick="">刪除</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呢不知道是不是這樣子。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章