欢迎光临
我们一直在努力

template模板占位符与循环渲染

模板占位符不会渲染

有时,我们需要循环渲染多个元素,比如:
 <div v-for="(item,index) of list" :key="item.id">
            <div>
                {{item.text}}---{{index}}
            </div>
            <span>
                {{item.text}}---{{index}}
            </span>
 </div>

上边代码中,虽然我们把v-for放在了外层div上,达到了渲染里边元素的目的,但是外层div也会出现在DOM中,这通常是我们不希望看到的

这个时候,我们可以用template占位符,即可以达到渲染多个元素的目的(div.span),又可以不在页面上增加新的元素(DOM中不存在)

<template v-for="(item,index) of list" :key="item.id">
            <div>
                {{item.text}}---{{index}}
            </div>
            <span>
                {{item.text}}---{{index}}
            </span>
</template>
赞(0) 打赏
未经允许不得转载:散人研 » template模板占位符与循环渲染
分享到: 更多 (0)

如果文章有不解或描述错误的地方,欢迎在评论区提问或指正!

评论 抢沙发

6 + 3 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏