这篇文章主要和大家分享用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相关内容大家可以关注其他文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• ajax+jquery实现页面局部刷新效果介绍

  在web开发中我们可能会遇到页面局部刷新的需求，那么我们要如何来实现呢？这篇文章就给大家分享一下ajax+jquery实现页面某一个div刷新效果的实例代码，希望大家理解和学习页面局部刷新的知识有所帮助。

• JavaScript垃圾回收是什么，产生和策略是怎样的

  这篇文章主要为大家介绍了JavaScript的垃圾回收机制，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

• 利用jquery怎样做一个搜索历史的功能？

  现在很多网站都有搜索的功能，而经常搜索访问的朋友应该会注意的，再次搜索的时候会有搜索历史的显示，那么这样效果是怎样做的呢？本文就给大家介绍一下利用jquery插件怎样做一个搜索历史的功能。

• jQuery中清除兄弟元素的方法是什么，代码怎样写？

  jQuery中清除兄弟元素的方法是什么？在jQuery中，我们想要清楚兄弟元素，可以使用到remove()方法，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• jQuery怎么实现删除按钮删除表格的行

  方法：1、给按钮元素绑定click点击事件，指定事件处理函数；2、在处理函数中利用“$(元素)”语句匹配元素对象；3、利用“:eq()”和remove()方法删除当前行，语法为“元素对象.eq(位置值).remove()”。