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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
JavaScript 无符号右移运算符
Apr 17 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
基于JavaScript实现年月日三级联动
Jun 22 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
php查看session内容的函数
2008/08/27 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
php实现留言板功能
2017/03/05 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
PHP7新增函数
2021/03/09 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
python实现ip代理池功能示例
2019/07/05 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
大学生入党思想汇报
2014/01/14 职场文书
写自荐信三大法宝
2014/01/24 职场文书
模具数控专业自荐信
2014/01/27 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
老公保证书
2015/01/17 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python