Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[vue] <template></template>有什么用? #439

Open
haizhilin2013 opened this issue Jun 22, 2019 · 5 comments
Open

[vue] <template></template>有什么用? #439

haizhilin2013 opened this issue Jun 22, 2019 · 5 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

[vue] <template></template>有什么用?

@haizhilin2013 haizhilin2013 added the vue vue label Jun 22, 2019
@maozhuo123
Copy link

当做一个不可见的包裹元素,减少不必要的DOM元素,整个结构会更加清晰。

@censek
Copy link

censek commented Oct 29, 2019

被当做一个不可见的包裹元素,主要用于分组的条件判断和列表渲染。
https://blog.csdn.net/u013594477/article/details/80774483

@xiao-fe
Copy link

xiao-fe commented May 25, 2020

包裹嵌套其它元素,使元素具有区域性,自身具有三个特点:
*隐藏性:不会显示在页面中
*任意性:可以写在页面的任意地方
*无效性: 没有一个根元素包裹,任何HTML内容都是无效的

@qq-radio
Copy link

qq-radio commented Jan 1, 2021

template作用:相当于一个占位符,不显示在页面中,减少了不必要的dom元素
场景:结合v-for、v-if等一起使用,插槽时使用

@hyj443
Copy link

hyj443 commented Oct 20, 2021

<div>
    <template v-for="(item, i) in arr" :key="item.id">
        <div>{{item.text}}</div>
        <span>{{item.text}}</span>
    </template>
</div>

这么写,就不会额外增加一个div了,template标签就是一个模板占位符,编译的过程中,不会渲染成元素,用来帮我们包裹元素

还有一个优点

可以把 v-if v-for 等指令写在template标签中,把事件绑定写在template的子元素中,这样html结构就更清晰,标签数量不会过长。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vue vue
Projects
None yet
Development

No branches or pull requests

6 participants