类似于 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. Feign调用远程服务报错:Caused by: java.lang.IllegalStateException: Method getMemberInfo not annotated with HTTP method type (ex. GET, POST)

    org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'ord ...

  2. 重新定义数据库的时刻，阿里云数据库专家带你了解POLARDB

    摘要:POLARDB是阿里云ApsaraDB数据库团队研发的基于云计算架构的下一代关系型数据库,其最大的特色是计算节点与存储节点分离,借助优秀的RDMA网络以及最新的块存储技术.POLARDB不但满足 ...

  3. 2，ArrayList

    一,ArrayList简介 1,ArrayList 是一个数组队列,相当于动态数组.与Java中的数组相比,它的容量能动态增长. 2,ArrayList 继承了AbstractList,实现了List ...

  4. Linux下安装Tomcat(2)

    Tomcat是一个免费的开源的Serlvet容器,它是Apache基金会的Jakarta项目中的一个核心项目,由Apache,Sun和 其它一些公司及个人共同开发而成.由于有了Sun的参与和支持,最新 ...

  5. [hadoop](1) MapReduce:ChainMapper

    前言 本章主要讲述的是对于hadoop生态系统中,MapReduce写的ChainMapper的学习.MapReduce是hadoop集群数据处理的默认框架.而对于数据集中所有的数据必然有一些不友好的 ...

  6. spring boot中注册拦截器

    拦截器是动态拦截Action调用的对象.它提供了一种机制可以使开发者可以定义在一个action执行的前后执行的代码,也可以在一个action执行前阻止其执行,同时也提供了一种可以提取action中可重 ...

  7. 修改MySQL表varchar字段的小实验

    将actor表的first_name的varchar(45) ,修改为varchar(60) [root@vhost1 ~]# mysql -uroot -p -S /mysqldata/tmp/my ...

  8. Note：目录2

    ylbtech-Note:目录2 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech ...

  9. mariadb(四)连接查询,视图,事物,索引,外键

    一.连接查询 1)进入自己创建的zz数据库 2)创建学生表: create table students ( id int unsigned not null auto_increment prima ...

  10. HTML 解析类库HtmlAgilityPack

    1. HtmlAgilityPack简介 网站中首先遇到的问题是爬虫和解析HTML的问题,一般情况在获取页面少量信息的情况下,我们可以使用正则来精确匹配目标.不过本身正则表达式就比较复杂,同时正则表达 ...