轮播图前端

轮播图组件

<template>
  <div id="banner">
    <el-carousel height="400px">
<!--      将banner_list循环-->
      <el-carousel-item v-for="item in banner_list" :key="item">
<!--        <img src="../assets/img/banner1.png" alt="">-->
<!--        使用router-link给图片添加链接,注意to前还是要加冒号,item.link是后端表中配好的路径-->
        <router-link :to="item.link">
<!--          item.img:拿到每个对象的img属性,注意src前面要加个冒号,表示把数据渲染在这-->
        <img :src="item.img" :alt="item.name">
        </router-link>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
// export default 表示页面一创建的操作
export default {
  name: "Banner",
  // 一创建时的数据
  data() {
    return {
      // 定义一个列表,一开始为空,在template模块就可以使用到该变量了
      banner_list: []
    }
  },
  created() {
    // 当banner组件一创建就向后台发请求,拿回轮播图数据
    this.$axios.get(this.$settings.base_url + '/home/banner/').then(response => {
      console.log(response.data) // response.data是响应回来的数据
      // 把响应回来的数据给自己定义的列表
      this.banner_list=response.data
    }).catch(error => {
    })
  }
}
</script>

<style scoped>
.el-carousel__item {
  height: 400px;
  min-width: 1200px;
}

.el-carousel__item img {
  height: 400px;
  margin-left: calc(50% - 1920px / 2);
}
</style>

轮播图片的链接路由配置

image

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:轮播图前端 - Python技术站

(0)
上一篇 2023年4月2日 下午4:31
下一篇 2023年4月2日

相关文章

  • celery的介绍和使用

    celery介绍 celery是一个异步任务框架,它可以执行异步任务、延迟任务、定时任务 异步任务框架简述: 1)celery可以不依赖任何服务器,通过自身命令,启动服务(内部支持socket) 2)celery服务为为其他项目服务提供异步解决任务需求的 注:会有两个服务同时运行,一个是项目服务,一个是celery服务,项目服务将需要异步处理的任务交给cel…

    2023年4月2日
    00
  • django中的模板层简介

    1.什么是模板层 模板层可以根据视图中传递的字典数据动态生产相应的HTML页面 2.模板层的配置 1.在项目下创建一个与同名文件夹平行的templates文件夹 2.在settings.py中的TEMPLATES配置项中 BACKEND:指定模板的引擎 DIRS:模板的搜索目录(可以是一个或者多个) APP_DIRS:是否需要在应用中的templates文件…

    Python开发 2023年4月2日
    00
  • 基于tcp协议的套接字通信

    1、套接字socket简介 Socket是应用层与TCP/UDP协议通信的中间软件抽象层,它充当一种接口的角色!封装了传输层以下的东西。 1.1基于tcp的socket通信流程图 2.tcp服务端搭建 需求:模拟两个手机的通话 from ipaddress import IPv4Address import socket # 1.买手机 # socket.A…

    2023年4月2日
    00
  • 计算机介绍和五大组成

    1. 什么是计算机 计算机俗称‘电脑’,通电的人脑。其实,计算机所有的组成部分,都是模仿人的某一个功能或者器官。 2. 为什么要有计算机 为了执行人类通过编程语言编写的文件程序,从而把人类解放出来。 3.计算机的组成部分 计算机有五大组成部分:控制器、运算器、存储器、输入设备、输出设备。 3.1 控制器 它是计算机的指挥系统,负责控制计算机其他的组件如何进行…

    2023年4月2日
    00
  • 支付宝支付

    支付宝支付流程 在python中封装alipay 安装 >: pip install python-alipay-sdk –upgrade # 如果抛ssl相关错误,代表缺失该包 >: pip install pyopenssl 结构 libs ├── AliPay # aliapy二次封装包 │ ├── __init__.py # 包文件 │…

    2023年4月2日
    00
  • CORS跨域资源共享问题

    同源策略介绍 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同. 比如:我在本地上的域名是127.0…

    Python开发 2023年4月2日
    00
  • django中的路由层

    1.什么是路由层 简单来说,就是通过路由层中的path函数,告诉django遇到那个url,执行那个视图函数 2.路由层的请求流程 1.客户在浏览器输入网址→请求进入django的setting.py中的ROOT_URLCONF寻找指定使用的urls.py文件位置(如果中间件有路由功能,urls文件功能会被其替代) 2.Django会先匹配项目目录下的pat…

    Python开发 2023年4月2日
    00
  • 上线流程

    上线流程 上线前准备 首先将跑在本地版本的项目,上传至远端(gitee、github上) 重新复制一份项目的配置文件,可以命名为pro.py(dev为开发阶段的配置文件,pro为上线的配置文件) 在pro文件内,修改以下配置项: # 将调式模式改为false DEBUG = False # 运行的host地址,正常就是写服务端的ip地址,不知道可以先写* A…

    2023年4月2日
    00
合作推广
合作推广
分享本页
返回顶部