问题描述
假设我有三个div-A，B和c-并且我想在用户单击“重新排序”时更改其顺序。 例如，将B放在第一位，将C放在第二位，再将A放在第三位。 在Vue中最干净的方法是什么？
编辑：实际上，div中有很多内容，因此使用v-for进行类似{ divs: ['A', 'B', 'C'] } v-for会太混乱。
let app = new Vue({ el: '#app', methods: { reorder: function () { }, }, });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div>A</div> <div>B</div> <div>c</div> <button v-on:click="reorder()">Reorder</button> </div>
1楼
Dario Cavanillas
2
已采纳
2019-03-02 22:06:07
我会说...
在数据中您具有：
data: {
return {
blocks: [{
type: 'ComponentA'
content: {
title: 'Foo',
desc: 'lorem ipsum'
}
}, {
type: 'ComponentB'
content: {
title: 'Bar',
desc: 'lorem ipsum'
}
}, {
type: 'ComponentC'
content: {
title: 'Baz',
desc: 'lorem ipsum'
}
}]
}
}
在模板中，您具有：
<component v-for="(block, i) in blocks" :key="i" :is="block.type"/>
并reorder数组：
2楼
Adam Zerner
0
2019-03-02 21:59:30
这是我想出的：
-
将flexbox用于具有
flex-direction: column的容器flex-direction: column -
具有设置顺序的CSS类，例如。
.one { order: 1 } - 根据您要如何将CSS类动态分配给元素。
let app = new Vue({ el: '#app', data: { order: { a: 'one', b: 'two', c: 'three', }, }, methods: { reorder: function () { this.order.a = 'three'; this.order.b = 'one'; this.order.c = 'two'; }, }, });
#app { display: flex; flex-direction: column; } .one { order: 1; } .two { order: 2; } .three { order: 3; } button { order: 4; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-bind:class="order.a">A</div> <div v-bind:class="order.b">B</div> <div v-bind:class="order.c">C</div> <button v-on:click="reorder()">Reorder</button> </div>