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 相关文章推荐
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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
windows xp下安装pear
2006/12/02 PHP
php基础知识:函数基础知识
2006/12/13 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
如何在PHP中读写文件
2020/09/07 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
ant design实现圈选功能
2019/12/17 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
python 批量修改/替换数据的实例
2018/07/25 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
python 递归相关知识总结
2021/03/03 Python
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
铭立家具面试题
2012/12/06 面试题
行政总监岗位职责
2013/12/05 职场文书
物流合作计划书
2014/01/10 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
中秋寄语大全
2014/04/11 职场文书
社会工作专业求职信
2014/07/15 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers