vue写待办事项列表

Vue.js是一种流行的JavaScript框架，用于构建用户界面和单页面应用程序。要创建一个待办事项列表，我们可以使用Vue来动态呈现任务，并实现添加、删除和标记完成等功能。

首先，我们需要在Vue实例中定义一个任务列表数组，用来存储待办事项。然后，我们可以使用v-for指令，将数组中的任务动态地呈现在页面上。

接下来，我们可以添加一个输入框和按钮，用来输入新的待办事项并将其添加到任务列表中。这个过程可以通过v-model指令来实现双向数据绑定，使得输入框中的内容能够与数据模型保持同步。

除此之外，我们还可以为每个任务添加一个复选框，用来标记任务是否已完成。当用户点击复选框时，我们可以使用事件绑定和方法调用来更新任务的完成状态。

最后，我们还可以添加删除按钮，让用户能够删除已完成的任务。这个功能可以通过点击按钮时触发的方法来实现。

总之，使用Vue来写待办事项列表，可以通过Vue的指令和事件绑定等特性，实现数据的动态展现和交互操作。这样的方式可以使得我们的页面变得更加动态和用户友好。

相关问题

vue2待办事项项目实例

这是一个使用mui+mint+vue2.x+vue-router+vuex+webpack制作的待办事项项目实例，样式使用了vue移动端mint ui框架，原生手机能力偏重于mui框架。该项目实现了以下功能：
①勾选按钮可以选择是否已完成；
②若已完成（被勾选），则字体变暗和被划去；若未完成（没有被勾选），则保持不变；
③每条待办事项可自由选择是否删除；
④可自由添加事务进入待办事项中，回车键效果一样；
⑤有数字提示总事项和未完成事项。

<<代码示例>>

<template>
  <div class="todo">
    <div class="header">
      <h1>待办事项</h1>
      <div class="add">
        <input type="text" placeholder="添加待办事项" v-model="newTodo" @keyup.enter="addTodo">
      </div>
    </div>
    <div class="content">
      <ul>
        <li v-for="(todo, index) in todos" :key="index">
          <div class="checkbox">
            <input type="checkbox" v-model="todo.done" @change="updateTodo">
          </div>
          <div class="text" :class="{done: todo.done}">
            {{ todo.text }}
          </div>
          <div class="delete" @click="deleteTodo">
            <i class="iconfont icon-delete"></i>
          </div>
        </li>
      </ul>
    </div>
    <div class="footer">
      <div class="total">
        总事项：{{ todos.length }}
      </div>
      <div class="undone">
        未完成：{{ undone }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { text: '学习Vue', done: false },
        { text: '学习Vuex', done: false },
        { text: '学习Vue Router', done: false }
      ]
    }
  },
  computed: {
    undone() {
      return this.todos.filter(todo => !todo.done).length
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() === '') return
      this.todos.push({ text: this.newTodo, done: false })
      this.newTodo = ''
    },
    updateTodo() {
      localStorage.setItem('todos', JSON.stringify(this.todos))
    },
    deleteTodo() {
      this.todos.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.todo {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #42b983;
    color: #fff;
    h1 {
      font-size: 20px;
      font-weight: normal;
      margin: 0;
    }
    .add {
      flex: 1;
      margin-left: 10px;
      input {
        width: 100%;
        padding: 5px;
        border: none;
        border-radius: 5px;
        outline: none;
        font-size: 16px;
      }
    }
  }
  .content {
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #eee;
        .checkbox {
          margin-right: 10px;
          input {
            width: 20px;
            height: 20px;
          }
        }
        .text {
          flex: 1;
          font-size: 16px;
          &.done {
            color: #999;
            text-decoration: line-through;
          }
        }
        .delete {
          i {
            font-size: 20px;
            color: #999;
          }
        }
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #eee;
    .total, .undone {
      font-size: 16px;
    }
  }
}
</style>

写一个vue待办事项

创建一个简单的Vue.js待办事项应用通常包括以下几个步骤：

1. **安装依赖**：
首先，你需要安装Vue CLI，然后初始化一个新的项目。运行命令行：

   npm install -g @vue/cli
   vue create todo-app
   cd todo-app

2. **创建组件**：
创建一个名为`TodoItem.vue`的文件，定义一个单个待办事项：

   <template>
     <div class="todo-item">
       <input type="text" v-model="title" placeholder="添加任务...">
       <button @click="deleteItem">删除</button>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         title: '',
       };
     },
     methods: {
       deleteItem() {
         this.$emit('item-delete', this.title);
       }
     }
   }
   </script>
   <style scoped>
   .todo-item {
     padding: 5px;
   }
   </style>

3. **主组件**（如App.vue）中管理列表：

   <template>
     <div id="app">
       <h2>待办事项列表</h2>
       <ul ref="todoList">
         <li v-for="(item, index) in todos" :key="index">
           {{ item }}
           <TodoItem v-on:item-delete="removeTodo(index)" />
         </li>
       </ul>
       <input v-model="newTodo" placeholder="输入新任务...">
       <button @click="addTodo">添加</button>
     </div>
   </template>

   <script>
   import TodoItem from '@/components/TodoItem.vue';

   export default {
     components: { TodoItem },
     data() {
       return {
         newTodo: '',
         todos: [],
      };
     },
     methods: {
       addTodo() {
         if (this.newTodo.trim()) {
           this.todos.push(this.newTodo);
           this.newTodo = '';
         }
       },
       removeTodo(index) {
         this.todos.splice(index, 1);
       }
     }
   }
   </script>

4. **样式** 可以根据需求自定义。