javascript - Vue1.x 中,是否能够实现在2个for指令中,复用dom?
高洛峰
高洛峰 2017-04-11 12:09:55
0
1
300
<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,而不重新创建?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

membalas semua(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试了一下,可行哇

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan