先来看一个需求：下图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. Shell脚本监控CPU、内存和硬盘利用率

    1.监控CPU利用率(通过vmstat工具) #!/bin/bash #==================================================== # Author: l ...

  2. Linux系统iptables与firewalld防火墙

    iptables iptables服务用于处理或过滤流量的策略条目(规则),多条规则可以组成一个规则链,而规则链则依据数据包处理位置的不同进行分类. 在进行路由选择前处理数据包(PREROUTING) ...

  3. Linux后台运行和关闭jar项目

    直接用java -jar xxx.jar,当退出或关闭shell时,程序就会停止掉.以下方法可让jar运行后一直在后台运行. java -jar server.jar & 如果想要关闭java ...

  4. 【机器学习基础】交叉熵（cross entropy）损失函数是凸函数吗？

    之所以会有这个问题,是因为在学习 logistic regression 时,<统计机器学习>一书说它的负对数似然函数是凸函数,而 logistic regression 的负对数似然函数 ...

  5. Java类BufferedImage

    https://docs.oracle.com/javase/7/docs/api/java/awt/image/BandedSampleModel.html

  6. [译]Vulkan教程(24)索引buffer

    [译]Vulkan教程(24)索引buffer Index buffer 索引buffer Introduction 入门 The 3D meshes you'll be rendering in a ...

  7. IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1

    要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...

  8. #w30 2019年大前端技术周刊

    本周是2019年第30周 会议 2019年ArchSummit全球架构师峰会 2019年7月在深圳举行了ArchSummit全球架构师峰会,里面有不少关于大前端的主题可以关注. 从0到1,移动政务应用 ...

  9. C#中获取指定路径下指定后缀名的所有文件的路径的list

    场景 指定一个路径和后缀名,查找这个路径下所有以此后缀名结尾的文件. 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程序猿 获取 ...

  10. Android Service 启动流程

    执行顺序 : startService -> bindService -> unbindService -> stopService 回调的结果为: 执行顺序 : startServ ...