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

1.1 普通渲染       v-for="item in items"     /    v-for="item of items"    /

v-for="item of items":key="item"      key  提升性能
v-for="(item,index) of items":key="index"     index 消除同名 key 风险  （排序问题）
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <ul id="example-1">

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

      {{ item.message }}

    </li>

  </ul>

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

  <script>

    var example1 = new Vue({

      el: '#example-1',

      data: {

        items: [{

            message: 'Foo'

          },

          {

            message: 'Bar'

          }

        ]

      }

    })

  </script>

</body>

</html>

1.1.1 简单 todolist 小实例

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

</head>

<body>

    <div id="app">

        <input v-model="inputVal" />

        <button @click="addList">add</button>

        <ul>

            <li v-for="(item,index) of items":key="index">{{item}}</li>

        </ul>

    </div>

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

</body>

</html>

js

var app=new Vue({

    el:'#app',

    // template:'<h1>hello {{mes}}</h1>',

    data:{

        inputVal:'',

        items:[]

    },

    methods:{

        addList:function(){

            this.items.push(this.inputVal);

            this.inputVal='';

        }

    }

});

1.1.2 todo-list   组件化

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

</head>

<body>

    <div id="app">

        <input v-model="inputVal" />

        <button @click="addList">add</button>

        <ul>

            <todo-list

            v-for="(item,index) of items":key="index"

            :content="item"

            ></todo-list>

            <!-- <li v-for="(item,index) of items":key="index">{{item}}</li> -->

        </ul>

    </div>

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

</body>

</html>

js

// global component

// Vue.component('todo-list',

// {

//     props:['content'],

//     template:'<li>{{content}}</li>'}

// );

// local

var TodoItem={

    props:['content'],

    template:'<li>{{content}}</li>'

};

var app=new Vue({

    el:'#app',

    components:{

        'todo-list':TodoItem

    },

    data:{

        inputVal:'',

        items:[]

    },

    methods:{

        addList:function(){

            this.items.push(this.inputVal);

            this.inputVal='';

        }

    }

});

1.1.3 todo-list 父子组件之间传递参数、处理程序、发布 -  订阅模式

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

</head>

<body>

    <div id="app">

        <input v-model="inputVal" />

        <button @click="addList">add</button>

        <ul>

            <todo-list

            v-for="(item,index) of items":key="index"

            :content="item"

            :index="index"

            @del="removeHandle"

            ></todo-list>

            <!-- <li v-for="(item,index) of items":key="index">{{item}}</li> -->

        </ul>

    </div>

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

</body>

</html>

js

// global component

Vue.component('todo-list',{

    props:['content','index'],

    template:'<li @click="removeCall">{{content}}</li>',

    methods:{

        removeCall:function(){

            this.$emit('del',this.index); // 发布事件 del ，传入参数 index

        }

    }

});

// 传递媒介：

// 父组件 - 子组件  属性

// 子组件 - 父组件  发布 - 订阅 、 父组件预定义方法接受   

// local

// var TodoItem={

//     props:['content'],

//     template:'<li>{{content}}</li>'

// };

var app=new Vue({

    el:'#app',

    // components:{

    //     'todo-list':TodoItem

    // },

    data:{

        inputVal:'',

        items:[]

    },

    methods:{

        addList:function(){

            this.items.push(this.inputVal);

            this.inputVal='';

        },

        removeHandle:function(index){  // 父组件 -  接受处理程序

            this.items.splice(index,1);

        }

    }

});

1.2 带索引渲染    v-for="(item, index) in items"

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <ul id="example-2">

    <li v-for="(item, index) in items">

      {{ parentMessage }} - {{ index }} - {{ item.message }}

    </li>

  </ul>

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

  <script>

    var example2 = new Vue({

      el: '#example-2',

      data: {

        parentMessage: 'Parent',

        items: [{

            message: 'Foo'

          },

          {

            message: 'Bar'

          }

        ]

      }

    })

  </script>

</body>

</html>

2. 对象属性列表

2.1 普通渲染     （ 普通的js对象不加引号 ，   json 文件 默认为属性打上引号，同构造函数 大写一样，是一个默认）

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <ul id="v-for-object" class="demo">

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

      {{ value }}

    </li>

  </ul>

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

  <script>

    new Vue({

      el: '#v-for-object',

      data: {

        object: {

          title: 'How to do lists in Vue',

          author: 'Jane Doe',

          publishedAt: '2016-04-10'

        }

      }

    })

  </script>

</body>

</html>

2.2 带属性值

<div v-for="(value, name) in object"> {{ name }}: {{ value }} </div>

2.3 带属性值和索引

<div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div>

vue 列表渲染 v-for的更多相关文章

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

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

  2. Vue列表渲染

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

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

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

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

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

  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循环

    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. T84341 Jelly的难题1

    T84341 Jelly的难题1 题解 当窝发现窝的锅在读入这个矩阵的时候,窝..窝..窝.. 果然,一遇到和字符串有关的题就开始吹空调 好啦我们说说思路吧 BFS队列实现 拿出一个没有走过的点,扩展 ...

  2. slub

    1.前言 在Linux中,伙伴系统(buddy system)是以页为单位管理和分配内存.但是现实的需求却以字节为单位,假如我们需要申请20Bytes,总不能分配一页吧!那岂不是严重浪费内存.那么该如 ...

  3. [doker]ubuntu18安装doker

    ubuntu安装doker很简单,分4个步骤: Step1:更新资源库并安装apt-transprot-https软件包. 在安装Docker前, 首拉取最新的软件资源库 wangju@wangju- ...

  4. LinkedList简介

    原文:https://blog.csdn.net/GongchuangSu/article/details/51527042 LinkedList简介 LinkedList 是一个继承于Abstrac ...

  5. 四十八：数据库之alembic常用命令和经典错误的解决办法

    常用命令:1.init:创建一个alembic仓库2.reversion:创建一个新的版本3.--autogenerate:自动将当前模型的修改,生成迁移脚本4.-m:message,可以记录本次迁移 ...

  6. Linux上几款好用的字幕编辑器

    如果你经常看国外的大片,你应该会喜欢带字幕版本而不是有国语配音的版本.我在法国长大,童年的记忆里充满了迪斯尼电影.但是这些电影因为有了法语 的配音而听起来很怪.如果现在有机会能看原始的版本,我想,对于 ...

  7. redhat7.5 替换yum源

    Redhat 7自带的yum源需要付费注册,未注册情况下会报如下错误,且用yum repolist all检查源数目为0.这时候需要将RedHat 7自带的yum源 替换成CentOS 7免费源 解决 ...

  8. python003

    一.列表 1.列表是有序的,列表的元素可以修改# list 类li=[1,22,'ss','zp',['qqqq',111,33,['eeeeeeeee'],'ddddd',True]] #通过lis ...

  9. Django开发—如何重置migration

    情景一:不需要原有的数据库数据 删除数据库所有的表删除项目的migration模块中的所有 文件,除了init.py 文件执行脚本 python3 manage.py makemigrations p ...

  10. Python学习之面向对象(一）

    第六章 面向对象 6.1 面向对象的初识 6.1.1 什么是面向对象 面向过程式编程: ​ 好处:出色的完成所有的需求 ​ 坏处:凡是更改或者增加一条需求,可能整个项目都随之改变 面向对象式编程: 类 ...