IDEA激活码
目录
1.遍历数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 遍历的时候，没有使用索引值-->
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!-- 遍历的时候，使用索引值-->
<ul>
<li v-for="(item, index) in names">{{index+1}}.{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
names: ['kobe','bill','why','james'],
}
})
</script>
</body>
</html>
2.遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.仅获取value-->
<ul>
<li v-for="value in info">{{value}}</li>
</ul>
<!-- 2.获取value和key-->
<ul>
<li v-for="(value,key) in info">{{value}}-{{key}}</li>
</ul>
<!-- 3.获取value,key和index-->
<ul>
<li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
info: {
name: 'Brandan Eich',
age:60,
height: 1.88
},
}
})
</script>
</body>
</html>
3.官方推荐我们使用v-for指令的时候，给对应的元素或组件加上一个key属性
为什么？
如果我想在ABCDE序列中插一个F，如下
有key和没有key的对比如下：
不使用key，原来ACBDE的Dom其实没有变化，只是在最后增加一个Dom，将原来显示C的Dom显示的内容改为显示F，依次类推。这是为了尽量减少Dom的渲染操作，Vue会简单复用此处每个元素。
使用key，key给每一个结点作一个唯一标识，这样就不能简单复用原来的元素了，而是找到对应的位置插入新结点。
<ul>
<li v-for="item in letters" :key="item">{{item}}</li>
</ul>
key可以就用item本身来一一对应，不去用index
