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


Posted in Javascript onOctober 20, 2016

Vue.js简介

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

一、动态参数显示

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;
}
});
}
}
})

以上所述是小编给大家介绍的Vue.js Ajax动态参数与列表显示实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 #Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 #Javascript
javascript匀速动画和缓冲动画详解
Oct 20 #Javascript
js设置和获取自定义属性的方法
Oct 20 #Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 #Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 #Javascript
详解javascript事件绑定使用方法
Oct 20 #Javascript
You might like
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
教你如何把一篇文章按要求分段
2006/10/09 PHP
同时提取多条新闻中的文本一例
2006/10/09 PHP
DEFER怎么用?
2006/07/01 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
JQuery属性操作与循环用法示例
2019/05/15 jQuery
Vue使用axios出现options请求方法
2019/05/30 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
python局部赋值的规则
2013/03/07 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Python实现图像几何变换
2015/07/06 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
python 实现两个线程交替执行
2020/05/02 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
群众路线党课主持词
2014/04/01 职场文书
初中同学会活动方案
2014/08/22 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript