vue如何实现点击切换图片成效？
发布时间：2022-04-20 09:04:35 所属栏目：语言 来源：互联网
导读：这篇文章主要和大家分享用vue实现切换图片效果的小案例，点击按钮可以实现向前切换，向后切换和顺序切换的效果。下面我们就来看看具体的实现代码。 实现步骤 1、实现静态UI效果 用传统的方式实现标签结构和样式 2、基于数据重构UI效果 将静态的结构和样式重
|
这篇文章主要和大家分享用vue实现切换图片效果的小案例，点击按钮可以实现向前切换，向后切换和顺序切换的效果。下面我们就来看看具体的实现代码。 实现步骤 1、实现静态UI效果 用传统的方式实现标签结构和样式 2、基于数据重构UI效果 将静态的结构和样式重构为基于Vue模板语法的形式。 实现静态布局 <div id="app"> <button v-on:click="handla">向前切换</button> <button v-on:click="handlc">单向循环切换</button> <button v-on:click="handle">向后切换</button> <div class="tab"> <ul> <li :class="currentIndex==index?'active':''" :key="item.id" v-for="(item,index) in list">{{item.title}} </li> </ul> <div :class="currentIndex==index?'current':''" :key="item.id" v-for="(item,index) in list"> <img :src="item.path"> </div> </div> （编辑：南通站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
