Vue.js Ajax動的パラメータとリスト表示実装方法

Vue.js の紹介

vue はフランス語でビューを意味し、軽量で高性能なコンポーネント可能な MVVM ライブラリであり、非常に使いやすい API を備えています。

1。

1.3 JS

注: ここのJSは$(function() {})内に配置するか、本文に記述する必要があります

<script type="text/javascript" src="/js/vue.min.js"></script>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>

2. 動的リスト表示

空のリストの表示を開始します、ajax非同期 リクエスト後、返されたデータ一覧情報を受信して​​表示する

2.1 js導入、jquery

<div id="app">
<p>{{ message }}</p>
<button v-on:click="showData">显示数据</button>
</div>

も追加

2.2 html

new Vue({
el: '#app',
data: {
message: ''
},
methods: {
showData: function () {
var _self = this;
$.ajax({
type: 'GET',
url: '...',
success:function(data) {
_self.message = JSON.stringify(data);
}
});
}
}
})

2.3 JS

<script type="text/javascript" src="/js/vue.min.js"></script>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>