首頁 > php教程 > PHP开发 > 主體

Vue.js Ajax動態參數與列表顯示實作方法

高洛峰
發布: 2016-12-09 15:18:17
原創
1716 人瀏覽過

Vue.js簡介

vue是法語中視圖的意思,Vue.js是一個輕巧、高效能、可組件化的MVVM庫,同時擁有非常容易上手的API。

一、動態參數顯示

ajax非同步請求後,接收到回傳的data參數並顯示在前端

1.1 引入js,也加入了jQuery

<script type="text/javascript" src="/js/vue.min.js"></script>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
登入後複製
登入後複製

   

1.3 JS

注意:這裡JS一定要放在$(function() {})裡面,或是寫到body裡面

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

   

二、動態列表顯示請求後,接收到回傳的data清單資訊並顯示

2.1 引入js,也加入了jquery

new Vue({
el: &#39;#app&#39;,
data: {
message: &#39;&#39;
},
methods: {
showData: function () {
var _self = this;
$.ajax({
type: &#39;GET&#39;,
url: &#39;...&#39;,
success:function(data) {
_self.message = JSON.stringify(data);
}
});
}
}
})
登入後複製

   

2.2 html

<script type="text/javascript" src="/js/vue.min.js"></script>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
登入後複製
登入後複製
 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板