add todo效果

最新推荐文章于 2024-08-05 08:02:44 发布

原创

最新推荐文章于 2024-08-05 08:02:44 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文展示了在Vue.js项目中实现Todo管理功能的步骤，包括添加Todo、根据状态筛选Todo。通过Home.vue组件和vuex的store进行交互，实现了添加任务并进行已完成与未完成状态的筛选。

Add todo效果图

在这里插入图片描述

首先创建一个vue的项目
当输入内容是进行添加
点击筛选条数时进行筛选
点击查看所有筛选所有的条数
点击未完成筛选未完成的
点击已完成筛选已完成的

Home.vue

<template>
  <div class="home">
    <h3 class="title">add todo</h3>
    <div class="title-inp">
      <div class="inp">
        <input type="text" placeholder="请输入..." v-model="msg" />
      </div>

      <button class="inp-add" @click="addTodo">添加</button>
    </div>
    <div class="screen">
      <span class="screen-sp">筛选:</span>
      <select class="screen-sele" :value="limit" @change="setlimit($event.target.value)">
        <option :value="10">10</option>
        <option :value="15">15</option>
        <option :value="20">20</option>
      </select>
    </div>
    <div class="examine">
      <div class="examine-one" :class="{
    
    'tab-active' :status=='all'}" @click="bg('all')">查看所有</div>
      <div class="examine-two" :class=