Vue入门到精通—核心语法—列表渲染指令：v-for指令详解

Vue入门到精通—核心语法—列表渲染指令：v-for指令详解

在现代前端开发中，Vue.js 凭借其简洁的 API 和强大的生态系统，成为了开发者们构建动态网页应用的首选框架之一。其中，v-for 指令在 Vue.js 中扮演着至关重要的角色，它允许我们基于源数据多次渲染元素或模板块。本文旨在详细介绍如何使用 v-for 指令来实现列表的动态渲染、增、删、改操作，并探讨如何对列表数据进行过滤和排序。

一、基础：使用 v-for 动态渲染列表

当我们在模板中通过v-for指令来遍历数组显示列表时，指令的完整写法如下。

v-for="(item, index) in array"

其中，item为被遍历的array数组的元素别名，index为数组元素的下标。如果不需要下标，则可以简化为“v-for=“item in array””。

item和index的名称不是固定的，也可以使用其他的合法名称。当我们使用v-for指令遍历一个对象时，遍历的是对象自身所有可遍历的属性，指令的完整写法如下。

v-for="(value, name) in obj"

其中，value为被遍历的obj对象的属性值，name为属性名。如果只需要属性值，则可以简化为“v-for=“value inobject””。value和name的名称不是固定的，也可以使用其他的合法名称。

示例代码

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {
  
  { item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
     
     
  data() {
     
     
    return {
     
     
      items: [
        {
     
      name: 'Item 1' },
        {
     
      name: 'Item 2' },
        {
     
      name: 'Item 3' }
      ]
    };
  }
};
</script>

在这个例子中，我们遍历 items 数组，并在 ul 元素中为每个项目生成一个 li 元素。:key 属性是 Vue.js 在处理列表时推荐的做法，以提高渲染效率。

二、列表的增、删、改操作

1. 添加元素

通过绑定一个方法到按钮或其他触发元素上，我们可以在数组中添加新元素。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {
  
  { item.name }}
      </li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
export default {
     
     
  data() {
     
     
    return {
     
     
      items: