列表List--普通篇 · TP5搭配Easywechat & Jwt & Vue & Supervisor 玩轉微信開發

以下寫一個簡單的列表List ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iview example</title> <link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"> <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/iview/dist/iview.min.js"></script> <script src="//unpkg.com/axios/dist/axios.min.js"></script> <script src="//cdn.bootcss.com/qs/6.5.1/qs.js"></script> </head> <body> <div id="app"> <i-table :columns="columns" :data="data"></i-table> </div> <script> var Main = { data() { return { columns: [ { title: 'Name', key: 'name' }, { title: 'Age', key: 'age' }, { title: 'Address', key: 'address' } ], data: [ { name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', date: '2016-10-03' }, { name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', date: '2016-10-01' }, { name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', date: '2016-10-02' }, { name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', date: '2016-10-04' } ] } }, methods: { } } var Component = Vue.extend(Main) new Component().$mount('#app') </script> </body> </html> ~~~