vue.js 嵌套循环、if判断、动态删除的实例

Vue.js 嵌套循环、if判断、动态删除的实例攻略

在Vue.js中，我们可以使用嵌套循环、if判断和动态删除来处理复杂的数据渲染和交互逻辑。下面是一个详细的攻略，包含两个示例说明。

示例1：嵌套循环

假设我们有一个包含多个班级和学生信息的数据结构，我们想要在页面上展示每个班级的学生列表。首先，我们需要在Vue实例中定义数据：

data() {
  return {
    classes: [
      {
        name: 'Class A',
        students: [
          { name: 'Alice', age: 18 },
          { name: 'Bob', age: 17 },
          { name: 'Charlie', age: 19 }
        ]
      },
      {
        name: 'Class B',
        students: [
          { name: 'David', age: 16 },
          { name: 'Eve', age: 18 },
          { name: 'Frank', age: 17 }
        ]
      }
    ]
  }
}

然后，在模板中使用嵌套循环来展示班级和学生信息：

<template>
  <div>
    <h2>班级列表</h2>
    <ul>
      <li v-for=\"classItem in classes\" :key=\"classItem.name\">
        <h3>{{ classItem.name }}</h3>
        <ul>
          <li v-for=\"student in classItem.students\" :key=\"student.name\">
            {{ student.name }} - {{ student.age }}岁
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

这样，我们就可以在页面上展示每个班级的学生列表了。

示例2：if判断和动态删除

假设我们有一个待办事项列表，我们想要根据事项的状态来展示不同的样式，并且可以通过点击按钮动态删除事项。首先，我们需要在Vue实例中定义数据：

data() {
  return {
    todos: [
      { id: 1, text: '任务1', completed: false },
      { id: 2, text: '任务2', completed: true },
      { id: 3, text: '任务3', completed: false }
    ]
  }
}

然后，在模板中使用if判断和动态删除来展示和操作待办事项：

<template>
  <div>
    <h2>待办事项列表</h2>
    <ul>
      <li v-for=\"todo in todos\" :key=\"todo.id\">
        <span :class=\"{ 'completed': todo.completed }\">{{ todo.text }}</span>
        <button @click=\"deleteTodo(todo.id)\">删除</button>
      </li>
    </ul>
  </div>
</template>

在上面的示例中，我们使用:class指令来根据todo.completed的值动态添加completed类，从而改变样式。同时，我们使用@click指令来绑定deleteTodo方法，以实现点击按钮删除事项的功能。

在Vue实例中，我们需要定义deleteTodo方法：

methods: {
  deleteTodo(id) {
    this.todos = this.todos.filter(todo => todo.id !== id);
  }
}

这样，我们就可以根据事项的状态展示不同的样式，并且通过点击按钮动态删除事项了。

以上就是关于Vue.js嵌套循环、if判断和动态删除的实例攻略。希望对你有帮助！