Vue迴圈顯示tp5後臺傳送來的資料
阿新 • • 發佈:2019-01-13
資料庫:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<body>
<div id="app-5">
<table border="1" width="500" height="400">
<tr>
<td>姓名</td>
<td>密碼</td>
<td>時間</td>
</ tr>
<tr v-for="item in items">
<td>{{item.uname}}</td>
<td>{{item.upwd}}</td>
<td>{{item.rtime}}</td>
</tr>
</table>
</div>
</body>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
items:''
},
methods: {
indexs:function(){
this.$http.post('{:url("Index/fun")}')
.then(function(res){
this.items=res.data;
console.log(res.data);
})
.catch(function(error){
console.log(error);
});
}
},
mounted(){
//自動載入indexs方法
this.indexs();
}
})
</script>
</html>
<?php
namespace app\index\controller;
use think\Controller;
use think\Request;
use think\Db;
use think\db\Query;
use think\cache\driver\Redis;
class Index extends Controller
{
public function index()
{
return $this->fetch('index');
}
public function fun()
{
$sql=Db::name('users')
->select();
return $sql;
}
}