Vue.js Ajax动态参数与列表显示实现方法
2016-10-20 10:30
1661 查看
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动态参数与列表显示实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- 详解vue 中使用 AJAX获取数据的方法
- 详解vue与后端数据交互(ajax):vue-resource
- 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
- vue2 前后端分离项目ajax跨域session问题解决方法
- Vue-resource实现ajax请求和跨域请求示例
- Vue form 表单提交+ajax异步请求+分页效果
- vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
- vue使用Axios做ajax请求详解
- 使用vue框架 Ajax获取数据列表并用BootStrap显示出来
- Vue.js展示AJAX数据简单示例讲解
- 详解Vue.js基于$.ajax获取数据并与组件的data绑定
- vue.js 表格分页ajax 异步加载数据
- Javascript vue.js表格分页,ajax异步加载数据
- 浅谈Vue.js应用的四种AJAX请求数据模式
- VUE 更好的 ajax 上传处理 axios.js实现代码
- Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
- Vue Ajax跨域请求实例详解
- vue发送ajax请求详解
相关文章推荐
- Vue.js Ajax动态参数与列表显示
- Ajax调用后台action返回JSONArray(JSONObject)类型实现jsp中下拉列表的动态显示
- JS使用ajax从xml文件动态获取数据显示的方法
- 原生js实现ajax和将数组以列表形式显示出来
- 在Visualforce page中用自带的控件实现Ajax回调后台方法(并且可以用js去动态给parameters赋值)
- JS实现日期时间动态显示的方法
- 一个页面实现修改删除列表显示,ajax动态生成table(使用ajax,springmvc,jsp)
- ajax实现动态从数据库模糊查询显示到下拉框中(ajax方法返回Dataset的例子)
- ajax实现动态从数据库模糊查询显示到下拉框中(ajax方法返回Dataset的例子)
- ajax实现动态从数据库模糊查询显示到下拉框中(ajax方法返回Dataset的例子)
- asp+ajax能实现根据下拉列表值动态无刷新显示数据
- ajax+jquery+flea+smarty实现了通过选择下拉列表动态显示相应的数据
- JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
- JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
- JS使用ajax从xml文件动态获取数据显示的方法
- js动态生成form 并用ajax方式提交的实现方法
- vue.js给动态绑定的radio列表做批量编辑的方法
- Ajax实现动态显示并操作表信息的方法
- Vue 实现列表动态添加和删除的两种方法小结
- vue.js 实现点击按钮动态添加li的方法