v-for
1, v-for traverse the array
<div>
<!-- v-for 遍历数组 -->
<ul>
<!-- 1、在遍历的过程中，没有使用下标值（索引值） -->
<!-- item 是数组中的每一项，names 是数组的名字 就是相当于 v-for="item in array" -->
<li v-for="item in names">{
{item}}</li>
</ul>
<ul>
<!-- 2、在遍历过程中，获取索引值，index是数组的索引值，从0开始，这里 + 1 是为了看起来正常一点 -->
<li v-for="(item,index) in names">{
{index + 1}}.{
{item}}</li>
</ul>
</div>
2. v-for to traverse objects
<div id="app">
<!-- 遍历对象 -->
<ul>
<!-- 1、在遍历对象的过程中，如果只是获取一个值，那么获取到的是value 就是{key:value}的这个value -->
<li v-for="item in info">{
{item}}</li>
</ul>
<ul>
<!-- 2、获取key 和value 格式：（value,key) 输出的是这样：luluwang-name -->
<li v-for="(value,key) in info">{
{value}}-{
{key}}</li>
</ul>
<ul>
<!-- 3、获取key 和value 和index 格式：（value,key，index) 输出：0-luluwang-name -->
<li v-for="(value,key,index) in info">{
{index}}-{
{value}}-{
{key}}</li>
</ul>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
info: {
name: 'luluwang',
age: 18,
height: 165
}
}
})
</script>
3. Add key attribute to v-for
When using v-for, add a :key attribute to the corresponding element or component for better reuse, but ensure that the value of this key is unique, otherwise it is meaningless.