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 日期计算算法
Sep 11 Javascript
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 Javascript
vue使用video插件vue-video-player详解
Oct 23 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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/06 咖啡文化
如何对PHP程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
PHP脚本数据库功能详解(上)
2006/10/09 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
jquery、js操作checkbox全选反选
2014/03/12 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
使用python实现tcp自动重连
2017/07/02 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
地质灾害防治方案
2014/05/14 职场文书
假面舞会策划方案
2014/05/29 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
环卫工人慰问信
2015/02/15 职场文书
先进工作者个人总结
2015/02/15 职场文书
收入证明申请书
2015/06/12 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书