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

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_42249896/article/details/85922856