vue实现 div兑换
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 元素实现交换：
<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>每种方法适用于不同场景，简单内容交换可使用数组操作，需要动画效果可使用过渡，复杂拖拽交互建议使用专门库实现。
