类似于 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. Linux根据进程号查找其程序文件路径 及 lsof 命令使用

    查找进程文件路径 lsof -p pid 1.列出所有打开的文件: lsof 备注: 如果不加任何参数,就会打开所有被打开的文件,建议加上一下参数来具体定位 2. 查看谁正在使用某个文件 lsof   ...

  2. Selenium-WebDriverApi介绍

    浏览器操作: #刷新 driver.refresh() from selenium import webdriver driver=webdriver.Chrome() driver.get('htt ...

  3. MainRun

    package Testlink; import java.io.IOException; public class MainRun { public static void main(String[ ...

  4. CF1073G Yet Another LCP Problem 后缀自动机 + 虚树 + 树形DP

    题目描述 记 $lcp(i,j)$ 表示 $i$ 表示 $i$ 这个后缀和 $j$ 这个后缀的最长公共后缀长度给定一个字符串,每次询问的时候给出两个正整数集合 $A$ 和 $B$,求$\sum_{i\ ...

  5. locate 定位配置文件

    [root@VM_58_118_centos syhuo.net]# locate redis.conf /etc/redis.conf /etc/redis.conf_bak_20191008 /u ...

  6. ModuleNotFoundError: No module named 'mysql'

    问题:使用sqlalchemy初始化数据库报错,如图: 解决办法: pip install mysql-connector 安装后即可正常运行了 参照: https://blog.csdn.net/j ...

  7. day06—JavaScript之闭包

    转行学开发,代码100天——2018-03-22 第一次听说“闭包”这个词,还是在2015年某个深夜在听一节腾讯课堂的公开课上,当时老师讲什么已经没有清晰的记忆了,只知道是一次web的开发课程. 过了 ...

  8. WEB开发：Java与Php对比

    比较PHP和JSP这两个Web开发技术,在目前的情况是其实是比较PHP和Java的Web开发.以下是我就几个主要方面进行比较: 一. 语言比较 PHP是解释执行的服务器脚本语言,首先php有简单容易上 ...

  9. Jenkins持续集成_02_添加python项目&设置定时任务

    前言 自动化测试脚本编写后,最终目的都是持续集.持续集成可以实现一天多次部署运行自动化脚本,对功能进行不断监控测试.由于小编使用python编写的自动化脚本,这里仅讲解下如何在Jenkins中添加py ...

  10. Proxifier全局代理

    0x00前言   成功搭建使用shadowshocks实现代理访问google,然而只能浏览器代理方式使用,不能其他程序使用代理,不利于白帽子匿名安全检测,下面将介绍利用Proxifier实现全局代理 ...