当前位置：首页 > VUE

vue实现 div兑换

2026-01-18 04:28:00VUE

Vue 实现 div 兑换功能

在 Vue 中实现 div 兑换功能通常涉及动态交换两个或多个 div 的位置或内容。以下是几种常见实现方式：

使用 v-for 和数组操作

通过修改数据数组的顺序实现 div 位置交换：

<template>
  <div>
    <div v-for="(item, index) in items" :key="item.id" @click="swapDivs(index)">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, content: 'Div 1' },
        { id: 2, content: 'Div 2' },
        { id: 3, content: 'Div 3' }
      ]
    }
  },
  methods: {
    swapDivs(index) {
      if (index > 0) {
        const temp = this.items[index]
        this.$set(this.items, index, this.items[index - 1])
        this.$set(this.items, index - 1, temp)
      }
    }
  }
}
</script>

使用 CSS 过渡动画

添加过渡效果使交换更平滑：

<template>
  <transition-group name="swap" tag="div">
    <div v-for="item in items" :key="item.id" class="item">
      {{ item.content }}
    </div>
  </transition-group>
</template>

<style>
.swap-move {
  transition: transform 0.5s;
}
.item {
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>

使用拖拽库实现

对于更复杂的交互，可以使用拖拽库如 Vue.Draggable：

<template>
  <draggable v-model="items" group="divs" @end="onDragEnd">
    <div v-for="item in items" :key="item.id">
      {{ item.content }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, content: '可拖动Div 1' },
        { id: 2, content: '可拖动Div 2' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('Div位置已交换', this.items)
    }
  }
}
</script>

通过 ref 操作 DOM

直接操作 DOM 元素实现交换：

vue实现 div兑换

<template>
  <div>
    <div ref="div1" @click="swap">Div 1</div>
    <div ref="div2" @click="swap">Div 2</div>
  </div>
</template>

<script>
export default {
  methods: {
    swap() {
      const div1 = this.$refs.div1
      const div2 = this.$refs.div2
      const temp = div1.textContent
      div1.textContent = div2.textContent
      div2.textContent = temp
    }
  }
}
</script>

每种方法适用于不同场景，简单内容交换可使用数组操作，需要动画效果可使用过渡，复杂拖拽交互建议使用专门库实现。