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

一 for循环数组

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Vue列表</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <ul class="test">

            <li v-for="item in name"> <!--获取位置第一种写法:$index是vue自带的位置索引-->

                {{$index}}--{{item.message}}        <!--输出0--Foo    1--Bar-->

            </li>

            <li v-for="(index,item) in name">  <!--获取位置第二种写法:自定义一个index变量直接跟着item-->

                {{index}}**{{item.message}}                    <!--输出0**Foo    1**Bar-->

            </li>

        </ul>

        <script type="text/javascript">

            var myVue = new Vue({

                el: ".test",

                data: {

                    name: [   //注意name是数组

                  { message: 'Foo' },

                  { message: 'Bar' }

                ]

                }

            })

        </script>

    </body>

</html>

二 for循环对象

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Vue列表</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <ul class="test">

            <li v-for="value in name">

                {{$key}}--{{value}}     <!--输出是 FirstName--John LastName--Doe Age--30-->

            </li>

        </ul>

        <script type="text/javascript">

            var myVue = new Vue({

                el: ".test",

                data: {

                    name:{ //注意name是对象

                  FirstName: 'John',

                  LastName: 'Doe',

                  Age: 30

                }

                }

            })

        </script>

    </body>

</html>

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

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Vue列表</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <ul class="test">

            <li v-for="item in name" track-by="id"> <!--然后在替换数组 name 时，如果 Vue.js 遇到一个包含id:'01' 的新对象，vue可以复用这个已有对象的作用域与 DOM 元素。-->

                {{$index}}--{{item.message}}        <!--输出0--Foo    1--Bar-->

            </li>

        </ul>

        <script type="text/javascript">

            var myVue = new Vue({

                el: ".test",

                data: {

                    name: [   //注意item是数组

                  { message: 'Foo',id:01 },

                  { message: 'Bar',id:02 }

                ]

                }

            })

        </script>

    </body>

</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. 如何让DevExpress TreeList的每个结点高亮显示？

    概述:如何让DevExpress TreeList的每个节点高亮显示? 如何让DXperience TreeList的每个节点高亮显示? 效果如下: private void treeList1_Cu ...

  2. 十、EnterpriseFrameWork框架的分层架构及意义（控制器、业务对象、实体、Dao之间关系）

    本章内容主要包括两个方面,一.是框架分层(控制器.业务对象.实体.Dao)的详细说明,二.是对比常用三层结构的区别和优势: 本文要点: 1.框架中的各个分层详细说明 2.对比常用三层结构的区别和优势 ...

  3. 【cs229-Lecture17】离散与维数灾难

    主要内容: 解决MDP问题的算法: 离散化: 模型MDP的同化型: (model/similator) 拟合值迭代算法: Q函数: 近似政策迭代: 笔记转自:http://blog.csdn.net/ ...

  4. undefined symbol libiconv_open 完全解决方案

    我在另一篇关于Ubuntu+Sendmail+Dovecot+Openwebmail 邮件服务器搭建完全解决方案文章完成后,我的邮件服务器也搭建完成了, 事实上也正在运行中, 但是有网友依据我的操作步 ...

  5. ListView不规律刷新多次，重复执行getView

    写ListView的时候,有时会发现ListView中的getView执行多次,有的时候又不是,搞了半天才找到原因,在http://blog.csdn.net/danielinbiti/article ...

  6. LOD设置

    Level of detail: 使用多个不同复杂度的mesh来表示一个object,当物体离摄像机越远时,就是用更加low-detail的mesh,反之越近就越使用越精细的mesh. 组件:LOD ...

  7. SVN上传代码

    概述 SVN上传代码 使用SVN工具上传代码到新浪SAE 1.下载SVN工具http://tortoisesvn.net/downloads.html 2.创建一个文件夹,Checkout,输入SAE ...

  8. codeforces B. Strongly Connected City(dfs水过)

    题意:有横向和纵向的街道,每个街道只有一个方向,垂直的街道相交会产生一个节点,这样每个节点都有两个方向, 问是否每一个节点都可以由其他的节点到达.... 思路:规律没有想到,直接爆搜!每一个节点dfs ...

  9. Java Annotation认知(包括框架图、详细介绍、示例说明)

    摘要 Java Annotation是JDK5.0引入的一种注释机制. 网上很多关于Java Annotation的文章,看得人眼花缭乱.Java Annotation本来很简单的,结果说的人没说清楚 ...

  10. 编辑器之神VIM 总结(一) 基础部分

     版本号 说明 作者 日期  1.0  vim基础知识 Sky Wang 2013/06/19       概要 vim和emacs,一个是编辑器之神,一个是神一样的编辑器.他们被称是UNIX系统下的 ...