先来看一个需求：下图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. Mybatis中的@param注解的用法

    用注解来简化xml配置的时候,@Param注解的作用是给参数命名,参数命名后就能根据名字得到参数值,正确的将参数传入sql语句中 下午在写转账操作时,dao接口中的方法 @Update(update ...

  2. django重点url，视图函数，模板语言

    django重点url,视图函数,模板语言url 1.django重点url无命名分组:re_path() 2.url第一个参:url未命别名分组就不需要views中参数一定,若命别名(?P<y ...

  3. iconv转换

    /////////////////////////////////////////////////////// #include <iconv.h> #include <stdlib ...

  4. JavaScript-----10.作用域

    1.作用域 一段程序代码中所用到的名字不是总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域.目的是为了提高程序的可靠性,更重要的是减少命名冲突. 在es6之前,js的作用域有:全 ...

  5. hibernate-positional-parameter-does-not-exist-1-in-query

    经过bug的排查,问题出在,scsj字段的赋值上; 通过字符串在数据库端生成即可:

  6. typescript与nodejs（一）最简单的webserver

    安装nodejs tsc cnpm vscode 这些略 如果网络慢,可以考虑使用CNPM 一. 基本WebServer模块环境 1. 命令行  npm init 初始化一个目录为nodejs项目 2 ...

  7. 洛谷P3128 [USACO15DEC]最大流Max Flow　（树上差分）

    ###题目链接### 题目大意: 给你一棵树,k 次操作,每次操作中有 a  b 两点,这两点路上的所有点都被标记一次.问你 k 次操作之后,整棵树上的点中被标记的最大次数是多少. 分析: 1.由于数 ...

  8. 高并发 Nginx+Lua OpenResty系列（11）——流量复制/AB测试/协程

    流量复制 在实际开发中经常涉及到项目的升级,而该升级不能简单的上线就完事了,需要验证该升级是否兼容老的上线,因此可能需要并行运行两个项目一段时间进行数据比对和校验,待没问题后再进行上线.这其实就需要进 ...

  9. NFS文件系统及搭建NFS共享服务

    一.什么是文件系统? 文件系统是对一个存储设备上的数据和元数据进行组织的一种机制.文件系统是在一个磁盘(包括光盘.软盘.闪盘及其它存储设备)或分区上组织文件方式方法,常见文件系统如ext2.ext3. ...

  10. Java描述设计模式(01)：单例模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.单例模式 1.概念图解 单例设计模式定义:确保这个类只有一个实例,并且自动的实例化向系统提供这个对象. 2.样例代码 package co ...