• layui是一款非常優(yōu)秀的框架，使用也非常的廣泛，許多后臺管理系統(tǒng)都使用layui，簡單便捷，但是在涉及頁面部分數(shù)據(jù)變化，就比較難以處理，比如一個頁面一個提交頁，提交之后部分數(shù)據(jù)實時進行更新，根據(jù)數(shù)據(jù)動態(tài)控制元素顯示等。這些情況使用layui就需要自己用原始js方式去控制dom比較的麻煩，vue動態(tài)雙向綁定的特性剛好可以引入來解決復雜場景的問題

vue引入渲染

• 在對應需要的頁面引入vue，需要提前下載好vue.js

<script src="/assets/js/vue.js"></script>

• 這里以一個簡單列表渲染為例子，下面vue使用自定義分隔符delimiters，避免與模板引擎產(chǎn)生沖突，如模板引擎渲染分隔符不為{{}},可以不用自定義

<div class="layui-fluid">
	<div class="layui-row layui-col-space15" id="app">
		<table class="layui-table">
			<thead>
				<tr>
					<th>序號</th>
					<th>姓名</th>
					<th>年齡</th>
					<th>城市</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in tableList">
					<td>${index}</td>
					<td>${item.name}</td>
					<td>${item.age}</td>
					<td>${item.city}</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

	<script>
		layui.use(['form','table'],function () {
			var form = layui.form;
			var table = layui.table;

			var app = new Vue({
				el: '#app',
				delimiters: ['${', '}'],//自定義分隔符
				data:{
					tableList:[
						{name:'小明',age:'18',city:'武漢'},
						{name:'小紅',age:'20',city:'杭州'},
						{name:'小建',age:'23',city:'成都'},
					]
				}
			})
		})
	</script>

請求數(shù)據(jù)修改數(shù)據(jù)

• 上面只是簡單的數(shù)據(jù)渲染，時間開發(fā)中數(shù)據(jù)都是來源于接口請求，在layui中基本都是使用jQuery的ajax去請求接口，我們將上面的表格進行接口請求來刷新數(shù)據(jù)

<div class="layui-fluid">
	<div class="layui-row layui-col-space15" id="app">
		<table class="layui-table">
			<thead>
				<tr>
					<th>序號</th>
					<th>姓名</th>
					<th>年齡</th>
					<th>城市</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in tableList">
					<td>${index}</td>
					<td>${item.name}</td>
					<td>${item.age}</td>
					<td>${item.city}</td>
				</tr>
			</tbody>
		</table>
		<button class="layui-btn" id="btn">請求接口</button>
	</div>
</div>
	<script>
		layui.use(['form','table'],function () {
			var form = layui.form;
			var table = layui.table;

			var app = new Vue({
				el: '#app',
				delimiters: ['${', '}'],//自定義分隔符
				data:{
					tableList:[
						{name:'小明',age:'18',city:'武漢'},
						{name:'小紅',age:'20',city:'杭州'},
						{name:'小建',age:'23',city:'成都'},
					]
				}
			})

			$('#btn').click(function () {
				$.ajax({
					type:'post',
					data:{id:'123456'},
					url:'/post',
					success:function (data) {
						app.tableList = data//進行vue數(shù)據(jù)賦值
					}
				})
			})
		})
	</script>

文章來源地址http://www.zghlxwxcb.cn/news/detail-502603.html

到了這里，關于在layui中使用vue，使用vue進行頁面數(shù)據(jù)部分數(shù)據(jù)更新的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！