vue实现按钮切换图片

站长资源 2024/11/23 佚名

4 1538 4

DDR爱好者之家 Design By 杰米

本文实例为大家分享了vue实现按钮切换图片的具体代码，供大家参考，具体内容如下

Tab选项卡

实现步骤

1、实现静态UI效果

用传统的方式实现标签结构和样式

2、基于数据重构UI效果

将静态的结构和样式重构为基于Vue模板语法的形式
处理事件绑定和js控制逻辑

设置基本样式

{
 overflow: hidden;
 padding: 0;
 margin: 0;
 }

 .tab ul li {
 box-sizing: border-box;
 padding: 0;
 float: left;
 width: 100px;
 height: 45px;
 line-height: 45px;
 list-style: none;
 text-align: center;
 border-top: 1px solid #ccc;
 border-right: 1px solid #ccc;
 cursor: pointer;
 }

 .tab ul li.active {
 background-color: orange;
 }

 .tab ul li:first-child {
 border-left: 1px solid blue;
 }

 .tab div {
 width: 500px;
 height: 300px;
 display: none;
 text-align: center;
 font-size: 30px;
 line-height: 300px;
 border: 1px solid blue;
 border-top: 0px;
 }

 .tab div.current {
 display: block;
}

实现静态布局

<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" :key="item.id" v-for="(item,index) in list">{{item.title}}
 </li>
 </ul>
 <div :class="currentIndex==index" :key="item.id" v-for="(item,index) in list">
 <img :src="/UploadFiles/2021-04-02/item.path">

实现具体功能


<script type="text/javascript" src="/UploadFiles/2021-04-02/vue.js">

最终效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vue按钮切换图片,vue按钮切换,vue切换图片

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“vue实现按钮切换图片”

暂无评论...

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

2024年11月23日

vue实现按钮切换图片