百度貼吧項目記錄02

帖子的發佈與實時讀取實現

這兒調用了百度富文本完成了發帖組件

有很多的參數，具體可以查看詳細函數方法

這裏要提到一個圖片的獲取方法

		// 獲取html 從百度方法裏獲取內容
		var html=UM.getEditor('myEditor').getContent();
		// 檢查圖片
		var imgReg = /<img.*?(?:>|\/>)/gi;
		// 檢查路徑
		var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
		var arr = html.match(imgReg);  // arr 爲包含所有img標籤的數組
		//定義一個值用來拼接路徑
		var imgSrc='';
		for (var i = 0; i < arr.length; i++) {
		 var src = arr[i].match(srcReg);
		 //獲取圖片地址
		  console.log('圖片地址'+(i+1)+'：'+src[1]);
		  //拼接路徑
		  imgSrc+=src[1]+',';
		}

emm~~~怎麼說，這裏還是糾結了老半天，查看了網上許多方法與教程，終於摸出來了

這兒還要提到一個關於Vue的嵌套循環

這裏是渲染了items裏的一個嵌套數組imgSrc，用同樣的方式循環渲染出來
綁定圖片src的時候得用 v-bind:src=“list” 進行綁定

<li v-for="item in items">
	<li v-for="list in item.imgSrc"><img v-bind:src="list" alt=""></li>
</li>

注

這裏提交成功後，需要再重新渲染一次列表，重新獲取一次數據