1、v-for 遍历数组
e 代表emps数组的别名 index数组下标，从0开始
注意，使用 key 特殊属性 会基于key的变化重新排列元素顺序，并且会移除key不存在的元素
2、迭代对象
value 对应的是对象的属性值 key对应的是对象属性名 index是索引值
<div id="app">
<h3> 1、v-for 遍历数组</h3>
<ul>
<!--e 代表emps数组的别名 index数组下标，从0开始-->
<!--注意，使用 key 特殊属性 会基于key的变化重新排列元素顺序，并且会移除key不存在的元素-->
<li v-for="(e, index) in emps" v-bind:key="index">编号:{{ index+1 }}姓名:{{ e.name }} 薪资:{{ e.salary }}</li>
</ul>
<h3>2、迭代对象</h3>
<ul>
<!--value 对应的是对象的属性值 key对应的是对象属性名 index是索引值-->
<li v-for="(value,key,index) in person">
第{{index+1}}个属性为:{{key}} = {{value}}
</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data: {
emps:[
{name:'马云',salary:"20000"},
{name:'马化腾',salary:'18000'},
{name:'东哥',salary:'13000'}
],
person: {
name: '小花',
age: 18
}
},
methods:{ // 指定事件处理函数
}
});
</script><div id="app">
<!-- 1、在遍历对象过程中，如果只是获取一个值，那么获取得到的value是value -->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!-- 2、获取key和value (value,key) -->
<ul>
<li v-for="(value,key) in info">{{value}}--{{key}}</li>
</ul>
<!--3、获取key和value和index (value,key,index) -->
<ul>
<li v-for="(value,key,index) in info">{{value}}--{{key}}--{{index}}</li>
</ul>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
info:{
name:'A',
age:19,
height:1.33
}
}
})
</script>v-for 遍历数组
<!-- 1、在遍历的过程中，没有使用索引值(下标值) -->
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!-- 2、在遍历的过程中，获取索引值 -->
<ul>
<li v-for="(item,index) in names">
{{index+1}}.{{item}}
</li>
</ul>
<script>
const app = new Vue({
el:'#app',
data:{
names:['A','B','C','D']
}
})
</script>