先来看一个需求：下图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>

        <script>

            var vm = new Vue({

                el: '#app',

                data: {

                    list: [

                        {

                            id: "010120",

                            text: "How"

                        },

                        {

                            id: "010121",

                            text: "are"

                        },

                        {

                            id: "010122",

                            text: "you"

                        }

                    ]

                }

            })

        </script>

    </body>

</html>

　　　　

vue中template的作用及使用的更多相关文章

  1. vue中computed的作用以及用法

    在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...

  2. vue中template的三种写法

    第一种(使用模板字符串)早期字符串拼接年代 <div id="app"></div> new Vue({ el: "#app", tem ...

  3. vue中is的作用和用法

    回顾vue官方文档的过程中发现了is这个特性,虽然以我的写代码风格实在用不上,不过还是记录一下这个知识点 is的作用 <ul> <li></li> <li&g ...

  4. vue中moudles的作用及使用方法

    1.作用:vuex允许把store分割为模块,每一个模块都有自己的state,actions,getters,mutations甚至是嵌套一些子模块,从上到下进行同样方式的分割 在文件src中创建一个 ...

  5. vue中key的作用 v-for里警告 v-if的复用

    vue总是会复用页面上已经存在的dom,区别的方法是加上key就可以,还设有v-for时候的警告也是如此key的作用是区别这条跟那条的.<body> <div id="ap ...

  6. vue中Template 制作模版

    一.直接写在选项里的模板 直接在构造器里的template选项后边编写.这种写法比较直观,但是如果模板html代码太多,不建议这么写. javascript代码: var app=new Vue({ ...

  7. vue中key的作用

    1.v-if中用key管理可复用的元素  Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做,除了使 Vue 变得非常快之外,还有一些有用的好处.例如,如果你允许用户在不同的 ...

  8. 关于vue中tamplate和DOM节点浅谈

    前言:在开发前段页面使用vue时,我们能经常看到template标签.这里粗略讲下自己对vue中template理解和使用. 1. 先了解vue vue.js是一个轻巧.高性能.壳组件画的MVVM库. ...

  9. 【vue】vue中ref用法

    1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...

随机推荐

  1. [考试反思]1110csp-s模拟测试108：消遣

    是套废题.T1题面错了,T2细节多而暴力>部分分,T3题目错了. T1:打表 题面应该是输出差值期望而不是答案值期望. 看到题目,果断打表. 答案就是所有值差之和除2的k次方. #include ...

  2. 线程池API总结

    1.Executor:线程池顶级接口,只有一个方法 2.ExecutorService:真正的线程池接口 1) void execute(Runnable command) :执行任务/命令,没有返回 ...

  3. Unity ugui屏幕适配与世界坐标到ugui屏幕坐标的转换

    我们知道,如今的移动端设备分辨率五花八门,而开发过程中往往只取一种分辨率作为设计参考,例如采用1920*1080分辨率作为参考分辨率. 选定了一种参考分辨率后,美术设计人员就会固定以这样的分辨率来设计 ...

  4. go语言之切片即动态数组

    切片和数组的类型有什么不一样,我们可以打印一下,就可以知道两者的区别了,数组是容量的,所以中括号中有容量,切片的动态数组,是没有容量,这是数组和切片最大的区别 test8_4 := [20] int ...

  5. goweb-搭建服务

    web应用简介 Web 应用在我们的生活中无处不在.看看我们日常使用的各个应用程序,它们要 么是 Web 应用,要么是移动 App 这类 Web 应用的变种.无论哪一种编程语言,只要 它能够开发出与人 ...

  6. 原生js对cookie的增删改查

    一.增 document.cookie = cname + "=" + cvalue + ";expires=" + expires + ";path ...

  7. Java日期时间API系列6-----Jdk8中java.time包中的新的日期时间API类

    因为Jdk7及以前的日期时间类的不方便使用问题和线程安全问题等问题,2005年,Stephen Colebourne创建了Joda-Time库,作为替代的日期和时间API.Stephen向JCP提交了 ...

  8. SharePoint PowerShell 创建网站栏

    前言 最近,有这么个需求,需要使用PowerShell为网站集创建网站栏,好吧,直接看代码吧. Add-PSSnapin Microsoft.SharePoint.PowerShell -ErrorA ...

  9. linux学习（四）复制（cp）移动（mv）删除（rm）查找（find）文件、文件夹操作、软硬链接的区别

    目录 复制文件 mv命令 rm命令 touch 命令 file命令 find命令 grep命令 mkdir命令 rmdir命令 @(复制移动删除查找文件.软硬链接的区别) 复制文件 cp命令用于复制文 ...

  10. dubbo解决本地开发直连

    问题: 在如今的分布式项目开发中,zookeeper + dubbo是最常见的,通常的使用是用zookeeper做注册中心,dubbo做rpc,然后服务部署就可以实现相互之间的远程通信.所以开发项目时 ...