Vue中的template标签的使用和在template标签上使用v-for

旧城等待， 2023-02-26 14:27 14阅读 0赞

# [Vue中的template标签的使用和在template标签上使用v-for][Vue_template_template_v-for] #

我们知道  .vue 文件的基本结构是：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<template>
           ........
    </template>
    
    <script>
        export default {
            name: "demo"
    
        }
    </script>
    
    <style scoped>
    
        .demo {
              font-size: 28px;
        }
    
    </style>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

上面template标签，我们都知道是用来写 html 模板的，且内部必须只有一个根元素，像这样（不然报错）

但有时候我们也会看到，这样的写法，在template上使用for循环：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<template>
        <div class="root">
            
            <template v-for="item,index in 5">
                <div>{
      {index}}---{
      {item}}</div>
            </template>
        </div>
    </template>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

下面我们来看一下template是什么:

<template>
        <div class="root">
            <template>看看外面的标签是什么</template>
        </div>
    </template>

在浏览器中解析完的结果：

![format_png][]

可以看到文字外面是 div.root  ，所以本质上的<template>标签并没有什么意义。

所以我们再来看一下刚才的循环：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<template>
        <div class="root">
    
            <template v-for="item,index in 5">
                <div>测试{
      {index}}</div>
            </template>
    
        </div>
    </template>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

浏览器解析后的效果：

![format_png 1][]

可以看出这样写,类似平常这样写：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<template>
        <div class="root">
    
            <div v-for="item,index in 5">
                <div>测试{
      {index}}</div>
            </div>
    
        </div>
    </template>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

但是这样循环出来会多出一层div来

![format_png 2][]

所以我们有时候,不需要这外层的 div  所以我们可以采用上面 的方法，在 <template>标签上使用 v-for来循环。或者这样写：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<template>
        <div class="root">
    
            <div v-for="item,index in 5" :key="index">测试{
      {index}}</div>
    
        </div>
    </template>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

完！

![format_png 3][]

[Vue_template_template_v-for]: https://www.cnblogs.com/taohuaya/p/10686420.html
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: /images/20230209/ca04bbefb960458d9de5c8d3696ba92c.png
[format_png]: /images/20230209/56fbb57ba7a94e059f4882f81e96bd4c.png
[format_png 1]: /images/20230209/0d4576e8f82141d1ba36c6e81634cf3c.png
[format_png 2]: /images/20230209/fe6c1f5304f747ba89faf297dfc1340b.png
[format_png 3]: /images/20230209/518eb524da5a4d9da26545658730464f.png