Vue入门案例---ToDoList

最新推荐文章于 2024-08-31 10:56:24 发布

易de

最新推荐文章于 2024-08-31 10:56:24 发布

阅读量365

点赞数

分类专栏： vue H5

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/109587840

版权

本文通过一个Vue.js入门案例——ToDoList，详细讲解了如何实现任务管理应用的各项功能，包括添加任务、编辑任务、删除任务、任务状态切换以及使用localStorage持久化数据等操作。

摘要由CSDN通过智能技术生成

ToDoList

仿 ToDoList官方

功能展示

1.初始页面

在这里插入图片描述

<template>
  <div>
      <!-- 输入框 -->
      <input type="text" @keyup.enter="keyup" v-model.trim="value">

      <!-- 正在进行 -->
      <h2>正在进行({
   {
    yesSize }})</h2>
      <ul>
          <li v-for="(item,index) in list" v-show="!item.done" :key="index"> 
            <!-- 复选框 -->
            <!-- 取消复选框的默认选中行为 -->
            <input type="checkbox" @click.prevent="changeDone(item)">
            
            <!-- 点击文字修改状态为输入框 -->
            <!-- 当点击的下标和当前下标一致的时候，让输入框显示 -->
            <span @click="changeState(index,item)" v-show="index !== updateIndex">{
   {
    item.value }}</span>  
            <input type="text" v-model="updateValue" v-show="index === updateIndex" @blur="update">

            <a href="javascript:;" @click="del(index)">删除</a>
        </li>
      </ul>
      <h2>已完成({
   {
    noSize }})</h2>
      <ul>
          <li v-for="(item,index) in list" v-show="item.done" :key="index"> 
            <!-- 复选框 -->
            <input type="checkbox" @click.prevent="changeDone(item)" checked>

            <!-- 点击文字修改状态为输入框 -->
            <!-- 当点击的下标和当前下标一致的时候，让输入框显示 -->
            <span @click="changeState(index,item)" v-show="index !== updateIndex">{
   {
    item.value }}</span>  
            <input type="text" v-model="updateValue" v-show="index === updateIndex" @blur="update">

            <a href="javascript:;" @click="del(index)">删除</a>
        </li>
      </ul>
  </