vue实现按钮切换图片

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

最终效果

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

• Vue鼠标滚轮滚动切换路由效果的实现方法
• vue实现滚动鼠标滚轮切换页面
• vue使用swiper实现左右滑动切换图片
• vue自定义js图片碎片轮播图切换效果的实现代码
• vue实现图片切换效果
• Vue实现base64编码图片间的切换功能
• vue卡片式点击切换图片组件使用详解
• Vue实现简单图片切换效果
• vue+js点击箭头实现图片切换
• Vue实现鼠标悬浮切换图片src

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！