vue中template的作用及使用

最新推荐文章于 2024-05-16 08:09:13 发布

荔枝1

最新推荐文章于 2024-05-16 08:09:13 发布

阅读量9.4k

点赞数

分类专栏： Vue

原文链接：https://www.cnblogs.com/tu-0718/p/11177236.html

版权

Vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

　　先来看一个需求：下图div用v-for做了列表循环，现在想要span也一起循环，应该怎么做？

　　有3种方法可以实现

　　　　①：直接用v-for对span也循环一次（该方法虽然可以使用，但不要用这种方式，因为以后你会哭）

　　　　②：在div和span外面包裹一个div，给这个div加循环（该方法会额外增加一个多余的div标签）

　　　　③：若你不想额外增加一个div，此时应该使用template来实现（推荐）

　　　　　template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上

　　　DEMO

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <template v-for="(item, index) in list" :key="item.id">
                <div>{{item.text}}--{{index}}</div>
                <span>{{item.text}}</span>
            </template>
        </div>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>
        <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> vm </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Vue({
            el: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#app</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,
            data: {
                list: [
                    {
                        id: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">010120</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">,
                        text: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">How</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">
                    },
                    {
                        id: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">010121</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">,
                        text: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">are</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">
                    },
                    {
                        id: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">010122</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">,
                        text: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">you</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">
                    }
                ]
            }
        })
    </span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span>

</html>

荔枝1

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
vue中template的作用及使用

 　　 先来看一个需求：下图div用v-for做了列表循环，现在想要span也一起循环，应该怎么做？　　  　　有3种方法可以实现 　　　　①：直接用v-for对span也循环一次（该方法虽然可以使用，但不要用这种方式，因为以后你会哭）　　　  　　　　②：在div和span外面包裹一个div，给这个...
复制链接

扫一扫