vue.js取ajax url列表,Vue.js Ajax动态参数与列表显示实现方法

Vue.js简介

vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

一、动态参数显示

ajax异步请求后，接收到返回的data参数并显示在前端

1.1 引入js，也加入了jQuery

1.2 html

{{ message }}

显示数据

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

2.2 html

ID名称条形码简称

{{goods.id}}{{goods.name}}{{goods.barcode}}{{goods.shortName}}

查询

2.3 JSvar goodsVue = new Vue({

el: '#app',

data: {

goodsList : ''

},

methods: {

nameSearch: function () {

var _self = this;

$.ajax({

type: 'GET',

url: '...',

success:function(data) {

_self.goodsList = data;

}

});

}

}

})