点击同一个按钮，切换内容

关于点击同一个按钮，切换内容的demo。vue.js

html代码

<template>
  <div class="test">
  	<!-- 点击按钮 -->
    <button @click="change()" :class="{active:index}">下一个</button>
    <!-- 切换内容 -->
    <div id="tab">
      <div v-show="index === 0" class="item">
        cat 猫猫
      </div>
      <div v-show="index === 1" class="item">
        猫猫
      </div>
      <div v-show="index === 2" class="item">
        cat
      </div>
    </div>
  </div>
</template>

js代码

<script>
export default {
  data () {
    return {　
      // 默认未 0，默认显示第一个item　　　　　　
      index: 0,
    }
  },
  methods: {
    // 点击 button 时，循环切换 index 的值 （0，1，2）
    change () {
      if(this.index >= 2 ) {
        this.index = 0
      } else{
        this.index ++
      }
      console.log(this.index)
    }
  }
}