先来看一个需求：下图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. [译]Vulkan教程(12)图形管道基础之入门

    [译]Vulkan教程(12)图形管道基础之入门 Introduction 入门 Over the course of the next few chapters we'll be setting u ...

  2. 服务监控之 Spring Boot Admin.

    一.概述  开始阅读这篇文章之前,建议先阅读下<SpringBoot 之Actuator>,该篇文章提到 Spring Boot Actuator 提供了对单个Spring Boot的监控 ...

  3. 使用ES6新特性async await进行异步处理

    我们往往在项目中会遇到这样的业务需求,就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,请求少了还好说,如果多了,就要一层一层的嵌套,就好像有点c ...

  4. flask的模板引擎jinja入门教程 包含一个通过网络实时传输Video视频流的示例

    本文首发于个人博客https://kezunlin.me/post/1e37a6/,欢迎阅读最新内容! tutorial to use python flask jinja templates and ...

  5. DOM介绍以及使用方法

    DOM的基本讲解 一.DOM (Document Object Model)文档对象模型 1.有属性有方法 var person = { name:'派大星', fav:function(){ } } ...

  6. HDU - 5952 Counting Cliques

    Counting Cliques HDU - 5952 OJ-ID: hdu-5952 author:Caution_X date of submission:20191110 tags:dfs,gr ...

  7. 硬盘容量统计神器WinDirStat

    最近遇到C盘快要爆满的问题,我的笔记本是128G SSD + 1t HDD,给C盘分配的空间是80G固态,由于平时疏远管理,造成了C盘臃肿,迁移一些软件,但还是没有太好的解决,这是上知乎发现有大神推荐 ...

  8. IE浏览器远程代码执行高危漏洞(CVE-2019-1367)

    IE浏览器远程代码执行高危漏洞(CVE-2019-1367)加固遇到的问题 一.背景介绍 Internet Explorer,是微软公司推出的一款网页浏览器.用户量极大.9月23日微软紧急发布安全更新 ...

  9. SpringCloud的入门学习之概念理解、Ribbon负载均衡入门

    1.Ribbon负载均衡,Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端.负载均衡的工具. 答:简单的说,Ribbon是Netflix发布的开源项目,主要功能 ...

  10. Java中Atomic类的使用分析

    1:为什么会出现Atomic类 在多线程或者并发环境中,我们常常会遇到这种情况 int i=0; i++ 稍有经验的同学都知道这种写法是线程不安全的.为了达到线程安全的目的,我们通常会用synchro ...