vue+element轮播图

最新推荐文章于 2024-01-03 10:04:37 发布

与之有余

最新推荐文章于 2024-01-03 10:04:37 发布

阅读量384

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.youkuaiyun.com/weixin_42873786/article/details/127726890

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用Vue.js结合Element UI实现的轮播图示例。该示例通过加载外部图片资源并利用Vue的数据绑定特性实现了响应式的轮播效果。代码中还包含了如何通过Ajax请求获取图片URL列表的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+element轮播图

// An highlighted block
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
<!-- 引入vue组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>//vue请求库
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style type="text/css" media="all">
    @import url("//unpkg.com/element-ui@2.15.10/lib/theme-chalk/index.css");
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .el-carousel__container {
    height: 88vh;
}

</style>
<div id="app">
<template>
  <el-carousel class="xh" indicator-position="outside">
    <el-carousel-item v-for="item in array">
        <img :src="'https://szxc.023700.com'+item" height="100%" width="100%" alt="" />
     </el-carousel-item>
  </el-carousel>
</template>
<script type="text/javascript" charset="utf-8">
 new Vue({
					el: '#app',
					data: {
					    array:[]
					},
					created: function() {
						this.ajax();
					},
					methods: {
					    ajax(){
					        let url ='';
							//发送get请求
							this.$http.get(url).then(function(res) {
							    this.array = res.body;
							}, function() {
								console.log('请求失败处理');
							});
					    }
					}
        
    })
</script>
</div>
</body>
</html>