类似于 v-if，你也可以利用带有 v-for 的 <template> 渲染多个元素。比如：

<html>

  <head>

    <title>Vue v-for on a template</title>

    <script src="vue.js"></script>

  </head>

  <body>

   <div id="app">

      <ul>

        <template v-for="item in items">

          <li>{{item.language}}</li>

          <li>---------</li>

        </template>

      </ul>

   </div>

   <script>

     new Vue({

        el:"#app",

        data:{

          items:[

             {language:"css"},

             {language:"JavaScript"},

             {language:"Vue.js"}

          ]

        }

     })

   </script>

  </body>

</html>

显示如下：

Vue:列表渲染 v-for on a <template>的更多相关文章

  1. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

  2. Vue入门系列（三）之Vue列表渲染及条件渲染实战

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  3. Vue 列表渲染及条件渲染实战

    条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...

  4. Vue列表渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...

  5. 14 Vue列表渲染

    列表渲染 用 v-for 把一个数组对应为一组元素(for循环) 我们可以用 v-for 指令基于一个数组来渲染一个列表. v-for 指令需要使用 item in items 形式的特殊语法, 其中 ...

  6. Vue 列表渲染中的key

    首先看一下官网的论述: 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略.如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单 ...

  7. Vue.js高效前端开发 • 【Vue列表渲染】

    全部章节 >>>> 文章目录 一.v-for指令 1.v-for指令使用 2.实践练习(待更新) 二.计算属性 1.计算属性创建和使用 2.实践练习(待更新) 三.侦听属性 1 ...

  8. vue 列表渲染 v-for

    1.数组列表       v-for 块中,我们拥有对父作用域属性的完全访问权限.v-for 还支持一个可选的第二个参数为当前项的索引 1.1 普通渲染       v-for="item ...

  9. vue 列表渲染 v-for循环

    v-for循环指令类似与html中C标签的循环,同样可以遍历数组,集合. 1.这里演示一下遍历数组的基本用法,代码如下 <!DOCTYPE html> <html> <h ...

随机推荐

  1. AOP说明

    小程序的开发者或者服务商会提供一些lib库,用来代理小程序的生命周期或API等,进而想要进行一些通用逻辑的处理(例如: 打点/事件触发/统一登录等等通用逻辑). 通常,小程序开发者们使用这些扩展包时, ...

  2. PHP PSR标准规范

    PHP PSR标准规范,PHP开发者都需要遵循规范. 官网(英文版本): https://www.php-fig.org 官网(中文版本): https://psr.phphub.org

  3. science_action

    w import random import pprint import math import matplotlib.pyplot as plt def gen_random(magnify_=10 ...

  4. Skyline（6.x）-二次开发手册使用技巧

    毕业设计选择 Skyline 的 Web 端二次开发,由于以前没有接触过 ActiveX 控件的使用,二次开发手册是英文的读起来有点吃力,并且 IE 直接控制台输出 ActiveX 控件创建的对象看不 ...

  5. scrapy-redis debug视频

    前言 在上一篇笔记说过会录个视频帮助理解里面的类方法,现在视频来了.只录了debug scheduler.py里面的类方法,还有spiders.py里面的类方法差不多,就不说了,自己动手丰衣足食.限于 ...

  6. import的项目结构不对

    问题如下,在我们新导入一个maven项目时,碰到这样的目录结构,总有点别扭,而且在运行Tomcat的时候,突然发现build i选项下面少了两个我们经常使用的两个选项 window  --Perspe ...

  7. 腾讯开源微服务架构 Tars，高性能 RPC 开发框架

    腾讯微服务架构 Tars 于今日正式开源. Tars 取名于电影“星际穿越”中的机器人,是支持多语言的高性能 RPC 开发框架和配套一体化的服务治理平台,可以帮助企业或者用户以微服务的方式快速构建稳定 ...

  8. 聊聊redis的监控工具

    序 本文主要研究一下redis的监控工具 redis-stat redis-stat是一个比较有名的redis指标可视化的监控工具,采用ruby开发,基于redis的info命令来统计,不影响redi ...

  9. 校内模拟赛 ： Rima —— 字典树+树形DP

    首先说一下,对一个刚学Trie树的蒟蒻来说(就是我),这道题是一道好题.Trie树比较简单,所以就不详细写了. Rima 内存限制:256 MiB 时间限制:1000 ms 标准输入输出 题目类型:传 ...

  10. mysql - 标识列

    #标识列 /* 又称为自增长列 含义:可以不用手动插入值,系统提供默认的序列值 特点: 1.表示列必须和主键搭配吗?不一定,但是要求是一个key 2.一个表中只能有一个标识列! 3.标识列的类型有限制 ...