vue 使用ajax更新data数据

最新推荐文章于 2021-09-23 11:36:00 发布

weixin_34150503

最新推荐文章于 2021-09-23 11:36:00 发布

阅读量1.8k

点赞数

文章标签： javascript 数据库 python ViewUI

原文链接：https://my.oschina.net/u/3574106/blog/1982800

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
.pc{
	width: 34px;
	height: 34px;
	cursor: pointer; 
	border: 1px solid #e1e2e3;  
	line-height: 34px;
	text-align: center;
	display: inline-block;
}
</style>
<body>
<div id="data">
<table  border="1">
	<tr>
		<th>no</th>
		<th>name</th>
		<th>source</th>
	</tr>
	<tr v-for="(dept,key) in depts">
		<td :no="dept.deptno">{{dept.deptno}}</td>
		<td>{{dept.dname}}</td>
		<td>{{dept.dbSource}}</td>
        <td>
          <span  v-if="key == 0">
             <input type="radio" name="policyIndex" :value="key" checked="checked">
          </span>
          <span v-else>
             <input type="radio" name="policyIndex" :value="key" />
          </span>
        </td>
	</tr>
</table>

<div>
	<span onclick="loadData(1)" class="pc">1</span>
	<span onclick="loadData(2)" class="pc">2</span>
	<span onclick="loadData(3)" class="pc">3</span>
	<span onclick="loadData(4)" class="pc">4</span>
</div>
</div>
<script src="/js/jquery.js"></script>
<script src="/js/vue.js"></script>
<script>
var vue;
$(function(){
	loadData(1);
})
function loadData(page){
	$.ajax({
		url:'/data',
		type:'get',
		data:{page:page},
		success:function(page){
			if(!vue){
				console.log('创建一个新的vue');
				vue=new Vue({
					el:'#data',
					data:{
						depts:page.list
					}
				})
			}else{
				console.log('利用了原来的vue');
				vue.depts=page.list;
			}
				
		}
	})
}
	

	
</script>
</body>
</html>

转载于:https://my.oschina.net/u/3574106/blog/1982800