javascript - Vue1.x 中，是否能够实现在2个for指令中，复用dom?

Question

<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，而不重新创建?

Answer 1

<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试了一下，可行哇