1. 程式人生 > >Vue迴圈顯示tp5後臺傳送來的資料

Vue迴圈顯示tp5後臺傳送來的資料

資料庫:
在這裡插入圖片描述

<!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;
    }
}

在這裡插入圖片描述