Vue.js Ajax动态参数与列表显示实例

一、动态参数显示

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.2 html

<div id="app"><p>{{ message }}</p><button v-on:click="showData">显示数据</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）;}}）;}}}）

二、动态列表显示

开始展示一个空白列表，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;}}）;}}}）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。