vue+element之carousel走马灯的使用（The use of vue+element carousel）

2022.10.13

大家好，今天我使用了vue+element实现走马灯的效果，类似于轮播图，可以进行一个图片的滑动。

Hello, everyone. Today, I used vue+element to realize the effect of rotating lights, which is similar to the wheel cast diagram, and can slide an image.

接下来就让我向大家展示如何使用它，并且解决其中遇到的问题。

Let me show you how to use it and solve the problems you encounter.

首先是element官方文档里面的写法。
The first is the way it's written in element's official documentation.

（Element - The world's most popular Vue UI framework）

<!-- carousel走马灯 --><el-carousel:interval="3000"type="card"height="300px"><el-carousel-item v-for="item in 4" :key="item"><h3 class="medium">{{ item }}</h3></el-carousel-item></el-carousel>

/* 走马灯样式 */
.el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 200px;margin: 0;
}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;
}.el-carousel__item:nth-child(2n + 1) {background-color: #d3dce6;
}

这是最初始的写法，实现的效果如图：

This is the initial way of writing, and the effect is shown below:

看上去是不是和swipter轮播图差不多，所以当时我就想直接把跑马灯变成轮播图实现。

It looks similar to swipter, so at that time I wanted to directly turn the running light into a wheel.

我的做法是这样的：

<el-carousel-item v-for="item in list" :key="item">

把4换成list，存放数组，然后就要新建一个数组。

I'm going to replace 4 with list, store the array, and then I'm going to create a new array.

data(){return{list:[{img:require('../assets/img/a.jpg')},{img:require('../assets/img/b.jpg')},{img:require('../assets/img/c.jpg')}]}}

当时我把data后面的括号变成：以及return后面多加了：然后就导致我的list数组没有被定义。

I changed the parentheses after data to: and the parentheses after return to:, which resulted in my list being undefined.

接着就要用差值表达式渲染数据。

Then you render the data with a difference expression.

 <el-carousel-item v-for="item in list" :key="item"><img :src="item.img" ></el-carousel-item>

src和:src的区别，src是当成字符串解析，:src是当成变量解析。

The difference between src, which is parsed as a string, and :src, which is parsed as a variable.

效果如图所示：

The effect is shown as follows:

这样就实现了一个swipter轮播图。

In this way, a swipter rotcast graph is implemented.

大家喜欢的话点个赞，支持一下！

If you like it, click a like and support it!

vue+element之carousel走马灯的使用（The use of vue+element carousel）相关推荐

(Carousel)解决：Element-ui 中 Carousel 走马灯的样式的修改问题
Ⅰ.Element-ui 提供的组件与想要目标情况的对比: 1.Element-ui 提供组件情况: 其一.Element-ui 自提供的代码情况为(示例的代码,例子如下): // Element-u ...
element走马灯自动_Element Carousel 走马灯的具体实现
本文来源于Element官方文档: 基础用法普通走马灯默认 Hover 指示器触发 {{ item }} Click 指示器触发 {{ item }} 组件- 走马灯基础用法默认 Hover ...
element 往node里面增加属性值_【Vue原理】Compile - 源码版之 Parse 属性解析
写文章不容易,点个赞呗兄弟专注 Vue 源码分享,文章分为白话版和源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本 [2.5.17] 如果你觉得排版难 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
使用 iview 实现PC端生成推广海报与二维码并下载的功能，基于iview Modal 对话框与 Carousel 走马灯组件实现
使用 iview 实现PC端生成推广海报与二维码并下载的功能,基于iview Modal 对话框与 Carousel 走马灯组件实现前言:最近在对公司网页进行改版的时候遇到一个问题,需要在PC端实 ...
Vue.js 3.0企业级管理后台开发实战：基于Element Plus UI
Vue.js 3.0企业级管理后台开发实战:基于Element Plus UI - 每天更新前言文章内容项目源码及课件第1章项目启动 1.1 项目原型 1.2 项目UI 1.3 项目开发流程 ...
vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别
思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想在Vue的 ...
vue v-if判断数组元素的值_我对Vue项目上线做的一些基本优化
前言大家好啊,我是wangly19,一名前端摸鱼小能手.最近忙着开源项目的东西,还有公司项目的迭代问题,导致更新文章的频率有点低了.也来聊聊我在干嘛吧. 第一个事情就是比较我的阉割版UI Desig ...
vue入门到启动_一篇超完整的Vue新手入门指导教程
前言新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一门编程技术了,它们有自己独立的类似Main函数的入口,有像MVC一样规范好的层次结构,有自己的开发 ...

vue+element之carousel走马灯的使用（The use of vue+element carousel）

vue+element之carousel走马灯的使用（The use of vue+element carousel）相关推荐

最新文章

热门文章