在layui中使用vue，使用vue进行页面数据部分数据更新-Toy模板网

这篇具有很好参考价值的文章主要介绍了在layui中使用vue，使用vue进行页面数据部分数据更新。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

layui是一款非常优秀的框架，使用也非常的广泛，许多后台管理系统都使用layui，简单便捷，但是在涉及页面部分数据变化，就比较难以处理，比如一个页面一个提交页，提交之后部分数据实时进行更新，根据数据动态控制元素显示等。这些情况使用layui就需要自己用原始js方式去控制dom比较的麻烦，vue动态双向绑定的特性刚好可以引入来解决复杂场景的问题

vue引入渲染

在对应需要的页面引入vue，需要提前下载好vue.js

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

这里以一个简单列表渲染为例子，下面vue使用自定义分隔符delimiters，避免与模板引擎产生冲突，如模板引擎渲染分隔符不为{{}},可以不用自定义

<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>

在layui中使用vue，使用vue进行页面数据部分数据更新

请求数据修改数据

上面只是简单的数据渲染，时间开发中数据都是来源于接口请求，在layui中基本都是使用jQuery的ajax去请求接口，我们将上面的表格进行接口请求来刷新数据

<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数据赋值
					}
				})
			})
		})
	</script>