iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 16
0

示範Vue.js&JQuery新增修改刪除查詢(顯示list)


22.php

<html>
<head>
    <meta charset="UTF-8">
    <title>示範Vue.js&JQuery新增修改刪除查詢(顯示list)</title>
</head>
<body>
<div id="show">
    <table>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>email</th>
        </tr>
        <tr v-if="list != null" v-for="item in list">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.email }}</td>
        </tr>
        <tr v-else>
            <td colspan="3">沒有資料</td>
        </tr>
    </table>
</div>
</body>
<script src="jquery-3.1.1.min.js"></script>
<script src="vue.js"></script>
<script>
    // start app
    new Vue({
        el: '#show',
        data: {
            list: []
        },
        mounted: function () {
            $.get('get-list.php', function (query) {
                this.list = query;
            }.bind(this), 'json');
        },
        methods: {}
    })
</script>
</html>

get-list.php

<?php
include 'config.php';
include 'pdoClass.php';

/**
 * PDO操作請自行寫
 */
$pdo = new pdoClass($config);
$query = $pdo->getList();
echo json_encode($query);

上一篇
Vue.JS且戰且飛(二十一)
下一篇
Vue.JS且戰且飛(二十三)
系列文
Vue.JS且戰且飛30

尚未有邦友留言

立即登入留言