关于vue.js:P7-vue3-列表渲染-vfor

数组

<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>

索引