vue实现点击切换数据

Vue 实现点击切换数据的方法

在 Vue 中实现点击切换数据可以通过多种方式实现，以下是几种常见的方法：

使用 v-on 指令绑定点击事件

通过 v-on 或 @ 简写绑定点击事件，在方法中修改数据。

<template>
  <div>
    <button @click="toggleData">切换数据</button>
    <p>{{ currentData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: ['数据1', '数据2', '数据3'],
      currentIndex: 0
    }
  },
  computed: {
    currentData() {
      return this.dataList[this.currentIndex]
    }
  },
  methods: {
    toggleData() {
      this.currentIndex = (this.currentIndex + 1) % this.dataList.length
    }
  }
}
</script>

使用 v-for 渲染列表并切换选中项

通过 v-for 渲染数据列表，点击时切换选中状态。

<template>
  <div>
    <ul>
      <li 
        v-for="(item, index) in dataList" 
        :key="index"
        @click="selectItem(index)"
        :class="{ active: currentIndex === index }"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: ['数据1', '数据2', '数据3'],
      currentIndex: 0
    }
  },
  methods: {
    selectItem(index) {
      this.currentIndex = index
    }
  }
}
</script>

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

使用 Vuex 管理状态

对于大型应用，可以使用 Vuex 管理状态，实现数据的全局切换。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    dataList: ['数据1', '数据2', '数据3'],
    currentIndex: 0
  },
  mutations: {
    toggleData(state) {
      state.currentIndex = (state.currentIndex + 1) % state.dataList.length
    }
  }
})

<template>
  <div>
    <button @click="toggleData">切换数据</button>
    <p>{{ currentData }}</p>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['dataList', 'currentIndex']),
    currentData() {
      return this.dataList[this.currentIndex]
    }
  },
  methods: {
    ...mapMutations(['toggleData'])
  }
}
</script>

使用动态组件切换数据

通过动态组件实现数据的切换展示。

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示组件A</button>
    <button @click="currentComponent = 'ComponentB'">显示组件B</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

以上方法可以根据具体需求选择适合的方式实现点击切换数据的功能。