Vue implements button switching picture

This article example shares the specific code of Vue to realize button switching pictures for your reference. The specific content is as follows

Tab

Implementation steps

1. Realize static UI effects

Implementing tag structure and style in a traditional way

2. Reconstruct UI effects based on data

Refactor the static structure and style into a Vue template syntax-based form to handle event binding and js control logic

Set the basic style

{
 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;
}

Implementing static layout

<div id="app">
 <button v-on:click="handla">Switch forward</button>
 <button v-on:click="handlc">One-way cycle switch</button>
 <button v-on:click="handle">Switch back</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>

Implement specific functions

<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>

Final result

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

How to implement the Vue mouse wheel scrolling switching routing effect
Vue implements scrolling the mouse wheel to switch pages
Vue uses swiper to switch pictures by sliding left and right
Vue custom js picture fragment carousel switching effect implementation code
Vue realizes picture switching effect
Vue implements switching function between base64 encoded images
Detailed explanation of the use of Vue card-style click-to-switch image component
Vue implements simple image switching effect
Vue+js click arrow to switch pictures
Vue implements mouse hover to switch image src

<<: Tutorial on installing mysql5.7.17 via yum on redhat7

>>: Detailed explanation of Linux Namespace User