Vue中template占位符的使用

1,391 阅读1分钟

应用场景:我们对如图中的div和span的循环,取的数据都是同一个list数组里的,这个时候我们觉得可以在外层包裹一个div,在包裹的div上写一次循环,在里面的div和span标签上分别使用插值表达式就可以了

image.png

但是打开dom结构发现,我们每一个循环外面都包裹了一个div,这就造成了我们dom结构的意义不明确

该使用template占位符了:可以帮助我们去包裹一些元素,但是在真正的渲染中并不会渲染在页面上

image.png 把我们之前外面包裹的div改成template占位符,div和span的dom外面就没有我们不喜欢的那个包裹的div了

image.png