• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue实现按钮切换图片

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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?'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>

</div>

实现具体功能

<script type="text/javascript" src="../js/vue.js"></script>
 <script type="text/javascript">
 /* */
 var vm = new Vue({
 el: '#app',
 data: {
 currentIndex: 0,
 list: [{
  id: 1,
  title: 'apple',
  path: 'img/apple.png'
 }, {
  id: 2,
  title: 'orange',
  path: 'img/orange.png'
 }, {
  id: 3,
  title: 'lemon',
  path: 'img/lemon.png'
 }]
 },
 methods: {
 handle: function () {
  if (this.currentIndex < 2) {
  this.currentIndex = this.currentIndex + 1
  }
 },

 handla: function () {
  if (this.currentIndex > 0) {
  this.currentIndex = this.currentIndex - 1
  }

 },
 handlc: function () {
  this.currentIndex = this.currentIndex + 1
  if (this.currentIndex > 2) {
  this.currentIndex = 0
  }

 },

 }
 })
</script>

最终效果

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
node脚手架搭建服务器实现token验证的方法发布时间:2022-02-05
下一篇:
node中短信api实现验证码登录的示例代码发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap