iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 16
0

Vue.js & JQuery & PHP AJAX


19.php

<html>
<head>
    <meta charset="UTF-8">
    <title>Vue.js & JQuery & PHP AJAX</title>
</head>
<body>
<div id="show">
    <ul>
        <li v-for="item in data">name : {{ item.name }} , age : {{ item.age }}</li>
    </ul>
</div>
</body>
<script src="jquery-3.1.1.min.js"></script>
<script src="vue.js"></script>
<script>
    // start app
    new Vue({
        el: '#show',
        data: {
            data: []
        },
        mounted: function () {
            $.get('data.php', function (data) {
                this.data = data
            }.bind(this),'json');
        },
        methods: {}
    })
</script>
</html>

data.php

<?php
$array[] = ['name' => 'eagle', 'age' => '?'];
$array[] = ['name' => 'SAM', 'age' => '?'];
$array[] = ['name' => '克拉克', 'age' => '?'];
$array[] = ['name' => '胖達', 'age' => '?'];
$array[] = ['name' => '賽大', 'age' => '?'];
$array[] = ['name' => '海綿寶寶', 'age' => '?'];
$array[] = ['name' => '蟹老闆', 'age' => '?'];
$array[] = ['name' => '外獅佬', 'age' => '?'];
$array[] = ['name' => '泰大', 'age' => '?'];
$array[] = ['name' => '總裁', 'age' => '?'];
echo json_encode($array);

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

尚未有邦友留言

立即登入留言