Vue.js Ajax動態(tài)參數(shù)與列表顯示實現(xiàn)方法

更新時間：2016年10月20日 10:30:20 作者：coding_forever

Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。下面通過本文給大家介紹vue.js ajax動態(tài)參數(shù)與列表顯示實現(xiàn)方法，感興趣的朋友一起看看吧

Vue.js簡介

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

一、動態(tài)參數(shù)顯示

ajax異步請求后，接收到返回的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);
}
});
}
}
})

二、動態(tài)列表顯示

開始展示一個空白列表，ajax異步請求后，接收到返回的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'>簡稱</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動態(tài)參數(shù)與列表顯示實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解
今天小編就為大家分享一篇element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
webpack&webpack-cli完全卸載過程
本文介紹了如何刪除全局和本地的webpack及其CLI,并提供了檢查webpack殘余文件的方法,總結(jié)了個人的操作經(jīng)驗,旨在為讀者提供參考,并期待獲得更多支持
2024-09-09
解決Vite無法分析出動態(tài)import的類型,控制臺出警告的問題
這篇文章主要介紹了解決Vite無法分析出動態(tài)import的類型,控制臺出警告的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue監(jiān)聽頁面滾動到某個高度觸發(fā)事件流程
這篇文章主要介紹了vue監(jiān)聽頁面滾動到某個高度觸發(fā)事件流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue語法和標(biāo)簽的入門使用教程
Vue是一套用于構(gòu)建用戶界面的漸進式框架,下面這篇文章主要給大家介紹了關(guān)于Vue語法和標(biāo)簽使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-08-08
vue 本地環(huán)境跨域請求proxyTable的方法
今天小編就為大家分享一篇vue 本地環(huán)境跨域請求proxyTable的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue兩個輸入框聯(lián)動校驗方式(最大值-最小值)
這篇文章主要介紹了vue兩個輸入框聯(lián)動校驗方式(最大值-最小值)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue 創(chuàng)建組件的兩種方法小結(jié)(必看)
Vue 創(chuàng)建組件的方法有哪些呢？下面小編就為大家分享一篇Vue 創(chuàng)建組件的兩種方法小結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue3項目中配置TypeScript和JavaScript的兼容
在Vue3開發(fā)中,常見的使用JavaScript（JS）編寫代碼,但也會有調(diào)整編寫語言使用TypeScript（TS）的需求,因此,在Vue3項目設(shè)置中兼容TS和JS是刻不容緩的重要任務(wù),
2023-08-08
Vue.js前端框架之事件處理小結(jié)
這篇文章主要介紹了Vue.js前端框架之事件處理小結(jié),本文給大家介紹了v-on 指令的基本用法，通過實例講解的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-04-04