vue 使用ajax更新data數據
<!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>
相關文章
- 1. vue中data數據改變了，視圖不更新詳解
- 2. 使用ajax輪詢作實時數據更新
- 3. vue 數據更改視圖不更新
- 4. Ckeditor經過Ajax更新數據
- 5. flask+sqlite3+echarts3+ajax 異步更新數據
- 6. Spring data的更新使用BeanUtils.copyProperties
- 7. thymeleaf使用ajax實現局部更新
- 8. vue的數組的數據的更新
- 9. Vue中使用this.$set更新頁面數據
- 10. vue使用ECharts時的異步更新與數據加載
- 更多相關文章...
- • MySQL UPDATE：修改數據（更新數據） - MySQL教程
- • ADO 更新記錄 - ADO 教程
- • Flink 數據傳輸及反壓詳解
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
