<!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>