首页  >  问答  >  正文

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

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

高洛峰高洛峰2771 天前277

全部回复(1)我来回复

  • 巴扎黑

    巴扎黑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试了一下,可行哇

    回复
    0
  • 取消回复