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

最新推荐文章于 2024-03-27 09:20:50 发布

原创最新推荐文章于 2024-03-27 09:20:50 发布 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

demo 专栏收录该内容

9 篇文章

订阅专栏

这是一个使用Vue.js实现的点击按钮切换内容的简单示例。通过点击按钮，内容会在三个不同的选项之间循环切换，利用v-show指令控制元素的显示与隐藏。此示例展示了Vue.js的数据绑定和事件处理能力。

关于点击同一个按钮，切换内容的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)
    }
  }
}