gitHub地址:https://github.com/manlili/vue_learn里面lesson09

一 for循环数组

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Vue列表</title>
  6.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  8.     </head>
  9.     <body>
  10.         <ul class="test">
  11.             <li v-for="item in name"> <!--获取位置第一种写法:$index是vue自带的位置索引-->
  12.                 {{$index}}--{{item.message}}        <!--输出0--Foo    1--Bar-->
  13.             </li>
  14.             <li v-for="(index,item) in name">  <!--获取位置第二种写法:自定义一个index变量直接跟着item-->
  15.                 {{index}}**{{item.message}}                    <!--输出0**Foo    1**Bar-->
  16.             </li>
  17.         </ul>
  18.         <script type="text/javascript">
  19.             var myVue = new Vue({
  20.                 el: ".test",
  21.                 data: {
  22.                     name: [   //注意name是数组
  23.                   { message: 'Foo' },
  24.                   { message: 'Bar' }
  25.                 ]
  26.                 }
  27.             })
  28.         </script>
  29.     </body>
  30. </html>

二 for循环对象

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Vue列表</title>
  6.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  8.     </head>
  9.     <body>
  10.         <ul class="test">
  11.             <li v-for="value in name">
  12.                 {{$key}}--{{value}}     <!--输出是 FirstName--John LastName--Doe Age--30-->
  13.             </li>
  14.         </ul>
  15.         <script type="text/javascript">
  16.             var myVue = new Vue({
  17.                 el: ".test",
  18.                 data: {
  19.                     name:{ //注意name是对象
  20.                   FirstName: 'John',
  21.                   LastName: 'Doe',
  22.                   Age: 30
  23.                 }
  24.                 }
  25.             })
  26.         </script>
  27.     </body>
  28. </html>

三 track-by定义不需重新渲染的DOM片段

功能:有时候数组数据变化,页面所有DOM都需要重新渲染,这样会增加渲染时间,但是track-by可以定义哪些DOM被复用,使Vue.js 因而能尽可能地复用已有实例

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Vue列表</title>
  6.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  8.     </head>
  9.     <body>
  10.         <ul class="test">
  11.             <li v-for="item in name" track-by="id"> <!--然后在替换数组 name 时，如果 Vue.js 遇到一个包含id:'01' 的新对象，vue可以复用这个已有对象的作用域与 DOM 元素。-->
  12.                 {{$index}}--{{item.message}}        <!--输出0--Foo    1--Bar-->
  13.             </li>
  14.         </ul>
  15.         <script type="text/javascript">
  16.             var myVue = new Vue({
  17.                 el: ".test",
  18.                 data: {
  19.                     name: [   //注意item是数组
  20.                   { message: 'Foo',id:01 },
  21.                   { message: 'Bar',id:02 }
  22.                 ]
  23.                 }
  24.             })
  25.         </script>
  26.     </body>
  27. </html>

Vue列表渲染的更多相关文章

  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. 14 Vue列表渲染

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

  5. Vue 列表渲染中的key

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

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

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

  7. vue 列表渲染 v-for

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

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

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

  9. Vue:列表渲染 v-for on a <template>

    类似于 v-if,你也可以利用带有 v-for 的 <template> 渲染多个元素.比如: <html> <head> <title>Vue v-f ...

随机推荐

  1. 用qt代码怎样编写图片保存格式[qt4.6]

    用qt代码怎样编写图片保存格式 qt提供了多个保存图片的接口,比较常用的接口如下 bool QPixmap::save ( const QString & fileName, const ch ...

  2. POJ 2082 Terrible Sets

    Terrible Sets Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 2747   Accepted: 1389 Des ...

  3. centos下安装ZooKeeper

    1.需求 安装ZooKeeper,metaQ 2.下载 http://zookeeper.apache.org/releases.html 当前stable版是zookeeper-3.4.6 3.解压 ...

  4. IBM X3650 M4服务器安装centos找不到硬盘的解决方法

    IBM X3650 M4是IBM新的2U的服务器,IBM服务器以高稳定性和卓越的性能一直领先其他的服务器品牌成为全球第一.但是我们在用IBM的最新版9.4引导盘引导的时候,里面选项只有windows ...

  5. 【转】基于CXF Java 搭建Web Service (Restful Web Service与基于SOAP的Web Service混合方案)

    转载:http://www.cnblogs.com/windwithlife/archive/2013/03/03/2942157.html 一,选择一个合适的,Web开发环境: 我选择的是Eclip ...

  6. PLSQL快捷补充代码设置

    菜单Tools-->Preferences...然后依次选择下图红色选项 弹出下图对话框 输入需要快速生成的语句点击保存 点击Save后在slq窗口中输入 设置的语句缩写 列入:第一个sf  然 ...

  7. 如何克隆kvm虚拟机

    关于如何使用kvm虚拟化技术创建虚拟机,这里有一系列博客讲的已经非常清楚了,这里不再赘述,不过其中有些小坑可能需要大家注意: 0. 写在创建虚拟机之前(即教程的系列三之前) 1. 确认防火墙是否关闭, ...

  8. 【深入浅出.Net IL】1.一个For循环引发的IL

    .Net底层剖析目录章节 1.[深入浅出.Net IL]1.一个For循环引发的IL 2.[.Net底层剖析]2.stfld指令-给对象的字段赋值 3.[.Net底层剖析]3.用IL来理解属性 1.准 ...

  9. Android 开发有用代码积累

    Android开发需求变化快,开发周期要求尽量短,接下来一系列文章从实际使用出发总结一些常用的代码片段,便于查找,也为后来人提供一份参考. 1.获取Manifest的基本信息(升级页面和软件关于页面一 ...

  10. ecshop的Mysql操作类

    摘要,这是直接摘抄的ecshop的mysql操作类:不过他这里的缓存是用的文件缓存,我们如果想直接使用,可以替换成memcache的或者redis的! <?php /** * ECSHOP MY ...