当前位置：首页 > VUE

vue实现div兑换

2026-03-29 10:19:11VUE

Vue 实现 div 交换的方法

在 Vue 中实现两个 div 元素的交换可以通过多种方式完成，以下是几种常见的方法：

使用 v-if 和 v-else 切换

通过条件渲染动态切换两个 div 的位置：

vue实现div兑换

<template>
  <div>
    <button @click="swapDivs">交换 div</button>
    <div v-if="showFirst">
      <div class="div1">第一个 div</div>
    </div>
    <div v-else>
      <div class="div2">第二个 div</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showFirst: true
    };
  },
  methods: {
    swapDivs() {
      this.showFirst = !this.showFirst;
    }
  }
};
</script>

使用数组和 v-for 动态渲染

通过数组索引动态调整 div 的顺序：

vue实现div兑换

<template>
  <div>
    <button @click="swapDivs">交换 div</button>
    <div v-for="(item, index) in divs" :key="index">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      divs: [
        { text: '第一个 div' },
        { text: '第二个 div' }
      ]
    };
  },
  methods: {
    swapDivs() {
      [this.divs[0], this.divs[1]] = [this.divs[1], this.divs[0]];
    }
  }
};
</script>

使用 CSS 和动态类名

通过动态类名调整 div 的样式实现交换效果：

<template>
  <div>
    <button @click="swapDivs">交换 div</button>
    <div :class="{ 'div1': !swapped, 'div2': swapped }">第一个 div</div>
    <div :class="{ 'div1': swapped, 'div2': !swapped }">第二个 div</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swapped: false
    };
  },
  methods: {
    swapDivs() {
      this.swapped = !this.swapped;
    }
  }
};
</script>

<style>
.div1 {
  order: 1;
}
.div2 {
  order: 2;
}
</style>

使用 Vue 的过渡动画

通过过渡效果平滑交换 div：

<template>
  <div>
    <button @click="swapDivs">交换 div</button>
    <transition-group name="swap" tag="div">
      <div v-for="(item, index) in divs" :key="item.id" class="item">
        {{ item.text }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      divs: [
        { id: 1, text: '第一个 div' },
        { id: 2, text: '第二个 div' }
      ]
    };
  },
  methods: {
    swapDivs() {
      [this.divs[0], this.divs[1]] = [this.divs[1], this.divs[0]];
    }
  }
};
</script>

<style>
.swap-move {
  transition: transform 0.5s;
}
.item {
  margin: 10px 0;
}
</style>