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. C++入门经典-例6.8-gets_s与puts的应用

    1:使用标准输入函数cin和格式化输入函数scanf时都存在这样一个问题:当输入空格时,程序不会接受空格符之后的内容内容. 输入函数gets_s与输出函数puts都只以结束符'\0'作为输入\输出结束 ...

  2. 2019java第十二周课程总结

    本周主要还是学习图形界面 各种容器使用方法 如下代码: package text10; import java.awt.*; import java.io.File; import javax.swi ...

  3. leetcode-easy-array-136. Single Number

    mycode   75.80% class Solution(object): def singleNumber(self, nums): """ :type nums: ...

  4. C# 防火墙操作之启用与关闭

    通过代码操作防火墙的方式有两种:一是代码操作修改注册表启用或关闭防火墙:二是直接操作防火墙对象来启用或关闭防火墙.不论哪一种方式,都需要使用管理员权限,所以操作前需要判断程序是否具有管理员权限. 1. ...

  5. leetcode 166分数到小数

    手动排除特殊情况: 对于一般情况,使用位运算和加减法来计算除法,使用sign记录结果符号:(这部分为leetcode 29题的答案) 使用hashmap来记录循环体出现的开始位置(如果有的话),使用f ...

  6. python - jpype模块，python调用java的接口

    转载自: http://www.cnblogs.com/junrong624/p/5278457.html https://www.cnblogs.com/fanghao/p/7745356.html ...

  7. js开发问题

    error: npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! sha3@1.2.0 install: `node-gyp rebuild` npm ...

  8. OpenvSwitch/OpenFlow 架构解析与实践案例

    目录 文章目录 目录 前言 软件定义网络(SDN) 虚拟交换机(vSwitch) 为什么说云计算时代的 SDN 非常重要 OpenFlow 简介 Open vSwitch Open vSwitch 的 ...

  9. spring aop影响dubbo返回值问题解决

    问题描述: dubbo服务已经注册,客户端调用提供者服务返回值为空.(考虑动态代理.aop的返回值影响,dubbo基于spring2.5.6.SEC03,本次开发使用的是spring4.3.8) 解决 ...

  10. 龙芯软硬件培训个人总结-day2

     今天最后一天,主要培训了BSP,QT,KVM云计算相关的内容.大致总结了一些自己关注的点.培训的资料已上传至服务器,如果需要可关注下方二维码,后台直接回复“资料”获取.关于实战的资料还未导出,等导出 ...