使用Vue完成一个简单的todolist的方法

使用Vue完成一个简单的Todolist的方法包括以下步骤：

步骤一：创建Vue项目

使用Vue.js官方提供的命令行工具vue-cli来创建一个新项目。具体方法是在命令行中运行以下命令：

vue create my-todolist

输入命令后按照提示进行操作，其中需要选择一些配置选项，例如babel、ESLint等。等待命令执行完成后，使用以下命令进入到项目目录中：

cd my-todolist

步骤二：编写TodoList的数据结构

在src目录下创建一个名为store.js的文件，并在其中定义TodoList的数据结构，如下所示：

let store = {
  todos: [
    { title: 'Learn JavaScript', completed: true },
    { title: 'Learn Vue', completed: false },
    { title: 'Build a TodoList with Vue', completed: false }
  ]
};
export default store;

在该数据结构中，我们定义了一个todos数组，用于存储所有的Todo项。每个Todo项中包含两个属性，一个是title，表示该项的内容，另一个是completed，表示该项是否已完成。一开始我们定义了三个Todo项，第一个已经被标记为已完成。

步骤三：创建TodoList组件

在src/components目录中创建一个名为TodoList.vue的文件，并在其中编写TodoList组件的代码：

<template>
  <div>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.completed">
        {{ todo.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import store from '@/store';

export default {
  name: 'TodoList',
  data() {
    return {
      todos: store.todos
    };
  }
};
</script>

在该组件中，我们使用v-for指令循环渲染所有的Todo项，并通过v-model指令绑定每个Todo项的完成状态。我们还从store.js文件中引入了todos数组，并将其赋给了组件的todos数据属性。

步骤四：在App.vue中使用TodoList组件

接下来我们需要在主组件App.vue中使用TodoList组件，这样才能将TodoList显示出来。我们只需要像下面这样在App.vue中添加TodoList组件即可：

<template>
  <div id="app">
    <TodoList></TodoList>
  </div>
</template>

<script>
import TodoList from '@/components/TodoList';

export default {
  name: 'App',
  components: {
    TodoList
  }
};
</script>

在该代码中，我们引入了TodoList组件，并在components选项中注册了它。接着将TodoList组件添加到了App.vue的模板中。

示例一：添加新的Todo项

为了能够添加新的Todo项，我们需要在TodoList组件中添加一个输入框和一个添加按钮。我们可以这样修改TodoList.vue：

<template>
  <div>
    <div>
      <input v-model="newTodoTitle" placeholder="Add a new Todo...">
      <button @click="addNewTodo">Add</button>
    </div>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.completed">
        {{ todo.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import store from '@/store';

export default {
  name: 'TodoList',
  data() {
    return {
      todos: store.todos,
      newTodoTitle: ''
    };
  },
  methods: {
    addNewTodo() {
      if (this.newTodoTitle.trim().length > 0) {
        this.todos.push({ title: this.newTodoTitle, completed: false });
        this.newTodoTitle = '';
      }
    }
  }
};
</script>

在该代码中，我们添加了一个输入框和一个添加按钮，用于输入新的Todo项并将其添加到列表中。我们还定义了一个addNewTodo方法，用于将新的Todo项添加到todos数组中。

示例二：根据完成状态过滤Todo项

有时候我们需要根据完成状态来筛选Todo项，例如只显示未完成的Todo项。我们可以在TodoList组件中添加过滤按钮，然后在v-for指令中使用computed属性来过滤Todo项。我们可以这样修改TodoList.vue：

<template>
  <div>
    <div>
      <input v-model="newTodoTitle" placeholder="Add a new Todo...">
      <button @click="addNewTodo">Add</button>
    </div>
    <button @click="currentFilter=0">All</button>
    <button @click="currentFilter=1">Active</button>
    <button @click="currentFilter=2">Completed</button>
    <ul>
      <li v-for="(todo, index) in filteredTodos" :key="index">
        <input type="checkbox" v-model="todo.completed">
        {{ todo.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import store from '@/store';

export default {
  name: 'TodoList',
  data() {
    return {
      todos: store.todos,
      newTodoTitle: '',
      currentFilter: 0
    };
  },
  methods: {
    addNewTodo() {
      if (this.newTodoTitle.trim().length > 0) {
        this.todos.push({ title: this.newTodoTitle, completed: false });
        this.newTodoTitle = '';
      }
    }
  },
  computed: {
    filteredTodos() {
      switch (this.currentFilter) {
        case 1:
          return this.todos.filter(todo => !todo.completed);
        case 2:
          return this.todos.filter(todo => todo.completed);
        default:
          return this.todos;
      }
    }
  }
};
</script>

在该代码中，我们添加了三个过滤按钮，用于筛选Todo项。我们还定义了一个filteredTodos计算属性，用于根据当前选中的过滤按钮来返回筛选后的Todo项数组。注意我们使用了switch语句来根据不同的过滤状态返回不同的筛选结果。最后我们将v-for指令中的todos数组改为了filteredTodos。