Vue.js Ajax动态参数与列表显示实现方法_鸿宇娱乐平台 

常见问题当前位置:鸿宇娱乐 > 常见问题 > >

Vue.js Ajax动态参数与列表显示实现方法

  

[vue,js,动态列表]Vue.js Ajax动态参数与列表显示实现方法

  

Vue.js简介  

  

vue是法语中视图的意思,Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。

  

  

一、动态参数显示   

  

ajax异步请求后,接收到返回的data参数并显示在前端  

  

1.1 引入js,也加入了jQuery  

  
  
  
  
  

1.2 html  

  
  
  
  

{{ message }}

    
  
  

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  

  
  
  
  
  

2.2 html  

  
  
  
                                    
ID名称条形码简称
{{goods.id}}{{goods.name}}{{goods.barcode}}{{goods.shortName}}
  鸿宇娱乐

  
  
  

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;  }  });  }  }  })
  
  

  

(责任编辑:admin)

上一篇:详解JavaScript中Date.UTC()方法的使用

下一篇:鸿宇娱乐平台:HTML中使背景图片自适应浏览器大

推荐内容

客户服务热线

010-400-12345

在线客服