详解vuejs之v-for列表渲染

详解vuejs之v-for列表渲染

什么是v-for

v-for是Vue.js的一个内置指令，用于根据一个数组的数据来循环渲染动态列表。我们可以把v-for看作是Vue实现列表渲染的核心指令之一。

v-for基本语法

v-for的基本语法如下所示：

<div v-for="(item, index) in list">{{ item }}</div>

• item：当前遍历的元素数据。
• index：当前遍历的元素下标。
• list：需要遍历的数组数据。

v-for数组更新

当数组的数据发生变化时，v-for也会跟着变化，自动更新视图。

<template>
  <div>
    <button @click="pushData">添加数据</button>
    <button @click="popData">删除数据</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['Apple', 'Banana', 'Orange']
    }
  },
  methods: {
    pushData() {
      this.list.push('Grape');
    },
    popData() {
      this.list.pop();
    }
  }
};
</script>

对象遍历

除了遍历数组，v-for同样可以遍历对象。

<template>
  <ul>
    <li v-for="(value, key, index) in object" :key="index">{{ key }}:{{ value }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      object: {
        name: 'Peter',
        age: 28,
        city: 'Shanghai'
      }
    }
  }
};
</script>

示例说明

我们以一个电影列表的案例来说明v-for的应用。我们需要先创建一个movies数组，用于存储电影列表，然后使用v-for指令进行遍历循环，最后将遍历后的结果渲染到页面上。

代码如下所示：

<template>
  <div>
    <h2>电影列表</h2>
    <ul>
      <li v-for="(movie, index) in movies" :key="index">
        <p>{{ movie.title }}</p>
        <p>{{ movie.year }}</p>
        <p>{{ movie.director }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movies: [
        {
          title: 'The Shawshank Redemption',
          year: '1994',
          director: 'Frank Darabont'
        },
        {
          title: 'The Godfather',
          year: '1972',
          director: 'Francis Ford Coppola'
        },
        {
          title: 'The Godfather: Part II',
          year: '1974',
          director: 'Francis Ford Coppola'
        }
      ]
    }
  }
};
</script>

另外一个示例是我们可以根据数字数组生成相应数量的HTML元素。

<template>
  <div>
    <h2>生成HTML元素列表</h2>
    <ul>
      <li v-for="n in count" :key="n">{{ n }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 5
    }
  }
};
</script>

以上就是v-for的详细介绍和两个示例的说明。