v-for 遍历数组和对象

vue 中 v-for 遍历数组

div id="app">
  <!--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>
</div>

<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      names: ['why','kobe','james','curry']
    }
  })
</script>

v-for 遍历对象

<div id="app">
  <!--1、在遍历对象的过程中，如果只能获取一个值，那么获取到的是 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 src="../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: 'why',
        age: 18,
        height: 1.83
      }
    }
  })