栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

Vue.js Ajax动态参数与列表显示实现方法

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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 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动态参数与列表显示实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/93357.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号