Vue.js Ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法
更新時(shí)間：2016年10月20日 10:30:20 作者：coding_forever
Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫，同時(shí)擁有非常容易上手的API。下面通過本文給大家介紹vue.js ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法，感興趣的朋友一起看看吧
Vue.js簡(jiǎn)介
vue是法語中視圖的意思，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫，同時(shí)擁有非常容易上手的API。
一、動(dòng)態(tài)參數(shù)顯示
ajax異步請(qǐng)求后，接收到返回的data參數(shù)并顯示在前端
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.2 html
<div id="app">
<p>{{ message }}</p>
<button v-on:click="showData">顯示數(shù)據(jù)</button>
</div>
1.3 JS
注意：這里JS一定要放在$(function() {})里面，或者是寫到body里面
new Vue({
el: '#app',
data: {
message: ''
},
methods: {
showData: function () {
var _self = this;
$.ajax({
type: 'GET',
url: '...',
success:function(data) {
_self.message = JSON.stringify(data);
}
});
}
}
})
二、動(dòng)態(tài)列表顯示
開始展示一個(gè)空白列表，ajax異步請(qǐng)求后，接收到返回的data列表信息并顯示
2.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>
2.2 html
<div id="app">
<table>
<thead>
<tr>
<th style='width:3%; text-align: left'>ID</th>
<th style='width:5%; text-align: left'>名稱</th>
<th style='width:10%; text-align: left'>條形碼</th>
<th style='width:10%; text-align: left'>簡(jiǎn)稱</th>
</tr>
</thead>
<tbody>
<tr v-for="goods in goodsList">
<td>{{goods.id}}</td>
<td>{{goods.name}}</td>
<td>{{goods.barcode}}</td>
<td>{{goods.shortName}}</td>
</tr>
</tbody>
</table>
<button v-on:click="nameSearch()">查詢</button><br><br>
</div>
2.3 JS
var goodsVue = new Vue({
el: '#app',
data: {
goodsList : ''
},
methods: {
nameSearch: function () {
var _self = this;
$.ajax({
type: 'GET',
url: '...',
success:function(data) {
_self.goodsList = data;
}
});
}
}
})
以上所述是小編給大家介紹的Vue.js Ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- vue.js給動(dòng)態(tài)綁定的radio列表做批量編輯的方法
- JS動(dòng)態(tài)的把左邊列表添加到右邊的實(shí)現(xiàn)代碼(可上下移動(dòng))
- JavaScript實(shí)現(xiàn)動(dòng)態(tài)刪除列表框值的方法
- javascript實(shí)現(xiàn)dom動(dòng)態(tài)創(chuàng)建省市縱向列表菜單的方法
- JavaScript實(shí)現(xiàn)向OL列表內(nèi)動(dòng)態(tài)添加LI元素的方法
- javascript為下拉列表動(dòng)態(tài)添加數(shù)據(jù)項(xiàng)
- extjs 列表框(multiselect)的動(dòng)態(tài)添加列表項(xiàng)的方法
- JS 動(dòng)態(tài)添加列表框項(xiàng)效果代碼
- JS如何生成動(dòng)態(tài)列表
相關(guān)文章
這篇文章主要介紹了vue3中給數(shù)組賦值丟失響應(yīng)式的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
解決echarts vue數(shù)據(jù)更新,視圖不更新問題(echarts嵌在vue彈框中)
這篇文章主要介紹了解決echarts vue數(shù)據(jù)更新,視圖不更新問題(echarts嵌在vue彈框中)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue如何跨組件傳遞Slot的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue移動(dòng)端實(shí)現(xiàn)左滑編輯與刪除的全過程
vue.js是現(xiàn)在流行的js框架之一,vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式j(luò)avascript框架，這篇文章主要給大家介紹了關(guān)于vue移動(dòng)端實(shí)現(xiàn)左滑編輯與刪除的相關(guān)資料,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了vue中的.sync修飾符用法及原理分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue里的data要用return返回的原因淺析,需要的朋友可以參考下2019-05-05
Composition Api封裝業(yè)務(wù)hook思路示例分享
這篇文章主要為大家介紹了Composition Api封裝業(yè)務(wù)hook的思路示例分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
使用vue實(shí)現(xiàn)pdf預(yù)覽功能的方法
許多朋友想要材料上傳之后點(diǎn)擊預(yù)覽實(shí)現(xiàn)在瀏覽器上預(yù)覽的效果,所以本文將給大家介紹如何使用vue實(shí)現(xiàn)pdf預(yù)覽功能,文中有實(shí)現(xiàn)代碼,有需要的朋友可以參考閱讀下2023-08-08
vue使用Element-UI部分組件適配移動(dòng)端問題
這篇文章主要介紹了vue使用Element-UI部分組件適配移動(dòng)端問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)5
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01