v-for 遍历

v-for 遍历数和对象

<template>
  <div>
    <!-- v-for 遍历数组 -->
    <ul>
      <li :key="index" v-for="(item, index) in list">{{ item.name }} -- {{ item.age }}</li>
    </ul>
    <!-- v-for 遍历对象 -->
    <ul>
      <li :key="index" v-for="(value, key, index) in userInfo">
        {{ index }} - {{ key }} - {{ value }}
      </li>
    </ul>
  </div>
  
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      userInfo: {
        name: 'lilei',
        age: 24,
        like: ['basketball', 'swimming', 'other']
      },
      list: [{name: 'xiaoming', age: 20}, {name: 'xiaohua', age: 30}]
    }
  }
};
</script>

在 v-for 里使用范围值

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

通过数组下标直接赋值，容易引起的bug

<template>
  <div>
    <!-- v-for 遍历数组 -->
    <ul>
      <li :key="index" v-for="(item, index) in list">{{ item.name }} -- {{ item.age }}</li>
    </ul>
    <button @click="addListHandle">添加</button>
    <button @click="addListHandle1">添加1</button>
    <!-- v-for 遍历对象 -->
    <ul>
      <li :key="index" v-for="(value, key, index) in userInfo">
        {{ index }} - {{ key }} - {{ value }}
      </li>
    </ul>
  </div>
  
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      userInfo: {
        name: 'lilei',
        age: 24,
        like: ['basketball', 'swimming', 'other']
      },
      list: [{name: 'xiaoming', age: 20}, {name: 'xiaohua', age: 30}]
    }
  },
  methods: {
    addListHandle() {
      // Vue没有对这种数组的赋值进行侦听，所以此操作不会更新界面，但是如果，其他的合法操作更新了界面，此操作也会更新
      this.list[this.list.length] = {name: 'hehe', age: 40}
    },
    addListHandle1() {
      // 由于userinfo.name 更新了，所以vue监听到了，会把数据全部更新一下，所以this.list[索引]也更新了，但是这样写是个容易引起bug的不好方式
      this.list[this.list.length] = {name: 'hehe1', age: 42}
      this.userInfo.name = 'lilei1'
    }
  }
};
</script>