Vue使用v-for循环显示tp5后台发送来的数据

数据库:
在这里插入图片描述


<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
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>

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

Vue使用v-for循环显示tp5后台发送来的数据_第1张图片

你可能感兴趣的:(Thinkphp,Vue)