先来看一个需求：下图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. C# 让你解决方案乱七八糟的DLL放入指定文件夹

    嗯,大家的解决方案可能会有许多dll,这样不美观,而且也麻烦. 很多小白都不知道如何将这些dll放到如自己程序的bin文件夹下. 本渣今天来试着将dll复制到指定的文件夹下~ 比如我之前做的一个Win ...

  2. 学习java需要英语很好吗？

    学习java需要英语很好吗? 编程语言起源于美国,是由英文构成的,其中包括几十个英文的关键字以及几百个英文的函数,除非需要对文本进行处理,否则一般不会出现中文.但是,它们都是孤立的单词,不构成任何语句 ...

  3. java之递归

    什么是递归 递归:指在当前方法内调用自己的这种现象. 递归的分类: 递归分为两种,直接递归和间接递归. 直接递归称为方法自身调用自己. 间接递归可以A方法调用B方法,B方法调用C方法,C方法调用A方法 ...

  4. Linux & Go & Vscode & 插件

    Linux Deepin 安装Go 安装Go环境 sudo apt-get install golang 验证一下: 输入 $ go env 输出 GOARCH="amd64" G ...

  5. String对象及正则表达式

    1,String和string还是有区别的,一个就是用双引号或单引号包括起来的数据就是字符串,另一个本质是数组多个字符串组成的只读字符数组: 2,你说string他是数组吧,他和数组还是有点区别的,他 ...

  6. SpringBoot 构建 REST 服务

    摘要 该文章只为了说明如何整合REST服务,并不介绍如何使用,当做笔记吧. MongoDB 以MongoDB为例 maven 依赖 <dependency> <groupId> ...

  7. 多线程七 AQS

    一 . 简介AQS AQS简介 在同步组件的实现中,AQS是核心部分,同步组件的实现者,通过使用AQS提供的模板方法 实现同步组件语义 AQS实现了对同步状态的管理以及阻塞线程进行排队,等待通知等等一 ...

  8. java 单链表 练习

    练习一下java单链表的简单习题 package com.test1; import java.util.Stack; public class SingleListDemo { /** * 返回单链 ...

  9. SpringCloud中Feign的适配器的实现方案

    前言 最近在做微服务的项目,各个系统之间需要进行调用,然后用一个适配器来实现服务之间的feign调用,使用适配器进行统一管理. 实现方案 首先我们需要将服务的名称进行单独的配置,可以方便的进行切换和扩 ...

  10. docker安装mysql、es、jenkins等一些步骤以及如何设置docker国内镜像

    CentOS7安装Docker步骤: (0)删除旧的可能安装过的包 yum remove docker \                   docker-client \              ...