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 相关文章推荐
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
JS基础之逻辑结构与循环操作示例
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
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
python实现决策树
2017/12/21 Python
python逆向入门教程
2018/01/15 Python
Python中反射和描述器总结
2018/09/23 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
Python接口自动化测试的实现
2020/08/28 Python
简述安装Slackware Linux系统的过程
2012/01/12 面试题
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
2014年采购工作总结
2014/11/20 职场文书
测量员岗位职责
2015/02/14 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server