2017.04 vue学习笔记---06列表渲染---v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin-bottom: 30px;
        }
    </style>
    <script src="js/vue.js"></script>
    <script src="js/jquery-1.12.3.min.js"></script>
</head>
<body>
    <!--
    v-for
    01.基本用法
     我们用 v-for 指令根据一组数组的选项列表进行渲染。
     v-for 指令需要以 item in items 形式的特殊语法，
     items 是源数据数组并且 item 是数组元素迭代的别名。
    -->
    <div id="demo1">
        <li v-for="item in items">
            {{item.message}}
        </li>
    </div>

    <!--在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。-->
    <div id="demo2">
        <li v-for="(item,index) in items">
            {{parentMessage}}---{{index}}---{{item.message}}
        </li>
    </div>
    <!--
        你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：
        <div v-for="item of items"></div>
    -->
    <!--
    02.template v-for
    如同 v-if 模板，你也可以用带有 v-for 的 <template> 标签来渲染多个元素块。例如：
    <ul>
      <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divider"></li>
      </template>
    </ul>
    -->
    <!--
        3.对象 v-for
        你也可以用 v-for 通过一个对象的属性来迭代。
    -->
    <!--<ul id="demo3" class="demo">
        <li v-for="value in object">
            {{value}}
        </li>
    </ul>-->
    <!--
    你也可以提供第二个的参数为键名：
    <ul id="demo3" class="demo">
        <li v-for="{value,key} in object">
            {{ key }} : {{ value }}
        </li>
    </ul>

    -->
    <!--第三个参数为索引：-->
    <ul id="demo3" class="demo">
        <div v-for="(value, key, index) in object">
            {{ index }}. {{ key }} : {{ value }}
        </div>
    </ul>

    <!--在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。-->
    <!--4.范围v-for-->
    <div>
        <span v-for="n in 10">{{n}}</span>
    </div>
    <!--5.v-for with v-if-->
    <!--
    当它们共存于同一节点上时，v-for具有比v-if更高的优先级。
    这意味着v-if将分别在循环的每次迭代上运行。
    当你只想要渲染某些部分项的节点时非常有用，如下所示：
    -->
    <li v-for="todo in todos" v-if="!todo.isComplete">
        {{ todo }}
    </li>
    <!--
    以上只渲染todos里还未完成的部分。
    如果相反地，你的意图是按条件跳过循环的执行，
    你可以将v-if放在一个包装元素（或<template>）里面。 例如：
    -->
    <ul v-if="shouldRenderTodos">
        <li v-for="todo in todos">
            {{ todo }}
        </li>
    </ul>
    <script>
        var demo1 = new Vue({
            el:"#demo1",
            data:{
                items:[
                    {message:'foo01'},
                    {message:'bar02'}
                ]
            }
        })

        var demo2 = new Vue({
            el:"#demo2",
            data:{
                parentMessage:'parent',
                items:[
                    {message:'foo'},
                    {message:'bar'}
                ]
            }
        })

        var demo3=new Vue({
            el:'#demo3',
            data:{
                object:{
                    firstName:'name1',
                    lastName:'name2',
                    age:66
                }
            }
        })
    </script>
</body>
</html>
学习是对自己负责，自己是职业发展的负责人！