P7. vue3 列表渲染 v-for

数组

<script>
export default {
  data() {
    return {
      prersion: ['tom', 'sean', 'green']
    };
  },
};
</script>

<template>
  <div>
    <!-- v-for 使用数组 -->
    <ul>
      <li v-for="item in prersion" :key="item"> {{item}}</li>
    </ul>
    <ul>
      <li v-for="(item,index) in prersion" :key="index"> {{item}}--{{index}}</li>
    </ul>
    <ul>
      <li v-for="(item,index) of prersion" :key="index"> {{item}}--{{index}}</li>
    </ul>

  </div>
</template>

<style>

</style>

of 和 in 一样可以作为分隔符。

对象

<script>
export default {
  data() {
    return {
      prersion: ['tom', 'sean', 'green'],
      prersonObj: {name: 'tom', age: 18, sex: 'nan'}
    };
  },
};
</script>

<template>
  <div>
    <!-- v-for 使用数组 -->
    <ul>
      <li v-for="item in prersion" :key="item"> {{item}}</li>
    </ul>
    <ul>
      <li v-for="(item,index) in prersion" :key="index"> {{item}}--{{index}}</li>
    </ul>
    <ul>
      <li v-for="(item,index) of prersion" :key="index"> {{item}}--{{index}}</li>
    </ul>
    <!-- v-for 使用对象 i 表示键值-->
    <ul>
      <li v-for="(i,k) in prersonObj" :key="k">value:{{i}} --key:{{k}}</li>
    </ul>



  </div>
</template>

<style>

</style>

索引

v-for 加key的原因

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

<script>
export default {
  data() {
    return {
      prersion: ['tom', 'sean', 'green'],
      prersonObj: {name: 'tom', age: 18, sex: 'nan'}
    };
  },
  methods:{
    addPerson: function (){
      this.prersion.unshift("cat")
    }
  }
};
</script>

<template>
  <div>
    <h1>Celery</h1>
    <!-- v-for 使用数组 -->
    <ul>
      <li v-for="item in prersion" :key="item"> {{item}}</li>
    </ul>
    <ul>
      <li v-for="(item,index) in prersion" :key="index"> {{item}}--{{index}}</li>
    </ul>
    <ul>
      <li v-for="(item,index) of prersion" :key="index"> {{item}}--{{index}}</li>
    </ul>
    <!-- v-for 使用对象 i 表示键值-->
    <ul>
      <li v-for="(i,k,index) in prersonObj" :key="index">value:{{i}} --key:{{k}}--index: {{index}}</li>
    </ul>
    <!-- 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素 -->
    <ul>
      <li v-for="item in prersion"> <input type="checkbox" name="" id=""> {{item}} </li>
    </ul>
    <button @click="addPerson">add</button>



  </div>
</template>

<style>

</style>