<root>
<component v-for="item in items1" :is="item.componentName>
{{item.msg}}
</component >
<component v-for="item in items2" :is="item.componentName>
{{item.msg}}
</component >
<button @click="items2.push(items1.shift())">向左移动</button>
<button @click="items1.push(items2.shift())">向右移动</button>
</root>
当我点击向左移动时,将数组items1中的第一个元素删除并添加到items2中,此时第一个v-for指令中将删除dom元素,第二个v-for元素中将生成一个dom元素(此元素是重新生成的)
问: 是否能够从指令一中复用这个dom,而不重新创建?
巴扎黑2017-04-11 12:11:55
<p id="app">
<p v-for="item in items1">
{{item.msg}}
</p >
</br>
<p v-for="item in items2">
{{item.msg}}
</p>
<button @click="items2.push(items1.shift())">向左移动</button>
<button @click="items1.push(items2.shift())">向右移动</button>
</p>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data: {
items1: [
{msg: 1},
{msg: 2},
{msg: 3},
{msg: 4},
{msg: 5}
],
items2: [
{msg: 6},
{msg: 7},
{msg: 8},
{msg: 9},
{msg: 0}
],
}
})
</script>
我是小白,就是下了你的demo试了一下,可行哇