分别用mui和vue.js对ajax请求获取到的图片做了轮播图的实现

首先说明一下，本人是个小白，刚开始学习mui和vue.js，首先App的首页刚进来就是一个轮播图，我就去mui文档里找了mui的轮播图，然后按照mui的ajax请求写了一个轮播图的实现，具体看代码。

注：使用mui必须导入mui相应的css和js,还要给mui初始化，具体看文档

这个是HTML页面

这是js部分的实现

/***获取轮播图*mui方法实现ajax请求，获取接口数据，并已原生的DOM操作实现对数据的遍历*/$.ajax({type: "post",url:"http://101.200.58.3/librarywebapi/advert/list",dataType: "json",success: function(res) {console.log(res);$('.mui-slider-group').empty();$('.mui-slider-indicator').empty();var length = res.Data.length;if(length == 1) {console.log(res.Data[0].Image)$('.mui-slider-group').append('');} else {$('.mui-slider-group').append('');$('.mui-slider-indicator').append('');for(var i = 0; i < length; i++) {$('.mui-slider-group').append('');}$('.mui-slider-group').append('');for(var i = 0; i < length - 1; i++) {$('.mui-slider-indicator').append('');}}var gallery = mui('.mui-slider');gallery.slider({interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；});}});

首先说明一点，写到这里是完全可以实现轮播图的效果的，但是我看着觉得很麻烦，这种方法写的太过去原生了，在现实开发过程中很麻烦，所以我就想vue.js可不可以和mui套用，用mui的页面，vue.js的js来实现，于是，我就写了另一种方式

注：vue.js需要导入相应的js包

ajax请求就需要导入axios包

下面上代码：(vue.js必选给外层div给一个id，js部分要取得这个元素，既：例子中的app)

下面是js部分的实现

/*** 获取轮播图*Vue.js方法实现ajax请求，获取接口数据，并且遍历到前端html页面*/var vm = new Vue({el:'#app',data:{// data中的值用来存储methods里面ajax请求得到的返回值，html页面遍历取得的就是data里面的值getAdvertImage:[],getAdvertImage0:[],},mounted:function(){//页面咦加载进去的时候就获得数据this.getAdvert();},methods:{getAdvert:function(){//发送get请求axios.post('http://101.200.58.3/librarywebapi/advert/list').then(function(res){vm.getAdvertImage = res.data.Data;for (var i = 0;i

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！