4.5前端学习第二十五天
<li v-for="item in fruits">{{item}}</li>
<li v-for="(item,index) in fruits">{{item}} + '---' + {{index}}</li>
第一行：将fruits中的内容逐一放到item中并输出。
第二行：将fruits中的index序号以及内容逐一放到item和index中，并添加分割线进行输出。
<li :key='item.id' v-for="(item,index) in myFruits">
<span>{{item.ename}}</span>
<span>---</span>
<span>{{item.cname}}</span>
<span>---</span>
<span>{{item.id}}</span>
</li>
将myFruits中的index和内容都放入item和index（但index没有输出），然后输出每组数据对应的ename、cname、item.id。此处加入key，对结果没有任何影响，我的理解是key可以根据每组数据当中不同的数据来更快的进行查找输出，反正就是会更快一点，记住就行了。
以下是<body>代码
<div id="app">
<div>水果列表</div>
<ul>
<li v-for="item in fruits">{{item}}</li>
<li v-for="(item,index) in fruits">{{item + '---' + index}}</li>
<!-- <li v-for="(item,index) in fruits">{{item}} + '---' + {{index}}</li>-->
<li :key='item.id' v-for="(item,index) in myFruits">
<span>{{item.ename}}</span>
<span>---</span>
<span>{{item.cname}}</span>
<span>---</span>
<span>{{item.id}}</span>
</li>
</ul>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
/*
循环结构
key的作用：帮助Vue区分不同的元素，从而提高性能
*/
var vm = new Vue({
el:'#app',
data: {
fruits:['apple','orange','banana'],
myFruits:[{
ename:'apple',
cname:'苹果',
id:1
},{
ename:'orange',
cname:'橘子',
id:2
},{
ename:'banana',
cname:'香蕉',
id:3
}]
},
}
});
今日计划
往后学两课
