示範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);
iThome鐵人賽
看影片追技術