Vue - Todos 案例

已于 2022-10-27 17:44:11 修改
阅读量1.2k 收藏 7
点赞数 6
分类专栏： vue 文章标签： vue.js css html 前端
于 2022-10-27 17:23:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62897746/article/details/127556354
版权

目录

效果概述

回车添加，删除，选中则禁用，过滤

具体效果

按回车键添加一层数据
按下拉箭头全部选中，全不选
选中则禁用
过滤全部，选中，未选中
全部删除
单个删除
双击改变名称

实现后效果图

todos 具体效果

具体代码思路

给 input 框绑定回车事件，回车后把数据请求到 vuex 中
把数据保存至本地存储中
给下拉箭头绑定点击事件，点击则给所有多选框进行反选
判断是否选中，如果选中则禁用
给数组进行过滤，然后渲染至页面中
双击 input 框 则允许改变样式，平时则禁止改变

HTML 结构

准备模拟数据，将数据添加到页面中，使用v-for;使用v-model实现数据的双向绑定
实现添加功能（在文本框输入，按回车添加数据）

编辑操作（双击每条信息todo，进行编辑）

  1. 双击todo时，给该条数据添加类editing,使得其进入编辑状态，并聚焦focus
  2. 编辑完成使用enter，改变该条数据
  3. 使用enter，退出编辑
  4. 失去焦点时退出编辑blur

删除（点击叉号时删除该条数据）

  1. 绑定一个点击事件
  2. 使用filter对todos进行操作

显示未完成的数量

  1. 计算出剩余未完成的数量
  2. 使用computed侦听属性，当checkbox变换时，进行侦听

不同按钮渲染不同数据

  1. 当点击按钮时，路由切换（改变路由）
  2. 点击All显示全部，点击Active显示已经完成的,Completed显示未完成的
  3. 如果绑定点击事件会比较麻烦，使用watch监听则刚进来时获取不到任何东西，所以只能使用计算属性（侦听的是自己的数据）
<div class="box">
  <ul class="center">
    <li>todos</li>
    <li>
      <input
        type="text"
        v-model="text"
        placeholder="What needs to be done?"
        @keyup.enter="submit"
      />
      <span class="bottom" @click="AllChecked" v-show="Down">❯</span>
    </li>
    <li
      v-for="(item, index) in list"
      :key="index"
      @mouseover="mouseOver(item)"
      @mouseleave="mouseLeave(item)"
    >
      <input
        type="text"
        v-model="item.title"
        :disabled="item.disabled"
        :readonly="item.readonly"
        @dblclick="dbTest(index)"
        @keyup.enter="readonly(index)"
      />
      <input
        type="checkbox"
        class="ckbox"
        v-model="item.checkbox"
        @click="radio(index)"
      />
      <button class="delete" v-show="item.delete" @click="Delete(index)">
        ×
      </button>
    </li>
    <li v-show="Down">
      <span> {{ id }} items left</span>
      <span
        v-for="(item, index) in tabs"
        :key="index"
        @click="Inquire(index)"
        :style="{ color: item.color }"
      >
        {{ item.title }}
      </span>
      <button @click="Clear">Clear completed</button>
    </li>
  </ul>
</div>

CSS 样式

css 样式使用 scss

.box {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  .center {
    width: 550px;
    margin: 0 auto;
    li {
      width: 100%;
      height: 65px;
      list-style: none;
      position: relative;
      input {
        width: 100%;
        height: 65px;
        border: none;
        padding: 20px 0px 20px 50px;
        border-bottom: 1px solid #ededed;
        outline: none;
      }
      button {
        background-color: rgba($color: #000000, $alpha: 0);
        border: none;
        color: #cc9a9a;
        font-size: 28px;
        margin-top: -8px;
      }
      .bottom {
        position: absolute;
        top: 18px;
        left: 15px;
        color: gainsboro;
        font-size: 25px;
        transform: rotate(90deg);
      }
      .ckbox {
        width: 20px;
        height: 20px;
        border-radius: 100%;
        position: absolute;
        top: 25px;
        left: 15px;
      }
      .delete {
        position: absolute;
        top: 25px;
        right: 15px;
      }
    }
    li:last-child {
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      button {
        background-color: rgba($color: #000000, $alpha: 0);
        border: none;
        color: #000;
        font-size: 16px;
        margin: 0;
      }
    }
    li:first-child {
      height: 80px;
      text-align: center;
      line-height: 80px;
      font-size: 50px;
      color: rgba(175, 47, 47, 0.15);
    }
    li:nth-of-type(2) {
      input {
        // color: #e6e6e6;
        font-size: 25px;
      }
    }
  }
}

JS 实现效果

import { mapState } from "vuex";
export default {
  data() {
    return {
      text: "",
    };
  },
  computed: {
    ...mapState(["list", "id", "all", "Down", "tabs"]),
  },
  mounted() {
    this.$store.commit("refresh");
  },
  methods: {
    // 提交
    submit() {
      if (this.text == "") {
        alert("不能为空");
      } else {
        this.$store.commit("list", {
          checkbox: false,
          title: this.text,
          delete: false,
          disabled: false,
          readonly: true,
        });
        this.text = "";
      }
    },
    // 鼠标移入
    mouseOver(item) {
      item.delete = true;
    },
    // 鼠标移出
    mouseLeave(item) {
      item.delete = false;
      item.readonly = true;
      localStorage.setItem("lists", JSON.stringify(this.list));
    },
    // 删除
    Delete(i) {
      this.$store.commit("Delete", i);
    },
    // 全部删除
    Clear() {
      this.$store.commit("clear");
    },
    // 全选
    AllChecked() {
      this.$store.commit("AllChecked", this.all);
    },
    // 单选
    radio(i) {
      this.$store.commit("radio", i);
    },
    // 查询
    Inquire(index) {
      if (index == 0) {
        this.$store.commit("All");
      } else if (index == 1) {
        this.$store.commit("Active");
      } else {
        this.$store.commit("Completed");
      }
    },
    // 双击修改
    dbTest(index) {
      this.$store.commit("dbTest", index);
    },
    // 回车取消修改
    readonly(index) {
      this.$store.commit("readonly", index);
    },
  },
};

vuex 具体代码

使用Vuex：
如果不是大型单页应用，使用 Vuex 可能是繁琐冗余的。如果您的应用够简单，您最好不要使用 Vuex。这里我们是用来学习，所以使用一下vuex试试

import { createStore } from 'vuex'

export default createStore({
  state: {
    list:JSON.parse(localStorage.getItem("lists")) || [],
    id:'',
    all:false,
    Down: true,
    tabs: JSON.parse(localStorage.getItem("tab")) ||
    [
      { title: "All", tab: "all", color: "red" },
      { title: "Active", tab: true, color: "black" },
      { title: "Completed", tab: false, color: "black" },
    ],
  },
  getters: {
  }, 
  mutations: {
    // 页面刷新时
    refresh(state){
      let arr1 = state.list.filter((item) => {
        return !item.checkbox;
      });    
      state.id = arr1.length    
      if(state.list == ""){
        state.Down = false
      }else{
        state.Down = true
      }
      let arr = state.list.filter((item) => {
        return item.checkbox ;
      });
      if(arr.length == state.list.length){
        state.all = true
      }else{
        state.all = false
      }
    },
    // 添加
    list(state,data){
      state.list.push(data)
      localStorage.setItem('lists',JSON.stringify(state.list))
      localStorage.removeItem('listd')
      this.commit('refresh')
    },
    // 删除
    Delete(state,data){
      state.list.splice(data,1)
      localStorage.setItem('lists',JSON.stringify(state.list))
      localStorage.removeItem('listd')

      this.commit('refresh')
    },
    // 全部删除
    clear(state){
      state.list = ''
      // localStorage.setItem('lists',JSON.stringify(state.list))
      localStorage.removeItem('lists')
      localStorage.removeItem('listd')
      
      state.id = 0
      if(state.list == ""){
        state.Down = false
      }else{
        state.Down = true
      }
    },
    // 全选
    AllChecked(state,data){
      console.log(!data);
      for(let i in state.list){
        // console.log(state.list[i].checkbox = !data);
        state.list[i].checkbox = !data
        state.list[i].disabled = !data
      }
      state.all = !data
      localStorage.setItem('lists',JSON.stringify(state.list))

      this.commit('refresh')
    },
    // 单选
    radio(state,data){
      state.list[data].checkbox = !state.list[data].checkbox
      
      let arr = state.list.filter((item) => {
        return item.checkbox ,item.disabled = item.checkbox;
      });
      if(arr.length == state.list.length){
        state.all = true
      }else{
        state.all = false
      }
      localStorage.setItem('lists',JSON.stringify(state.list))

      this.commit('refresh')
    },
    // 查询全部
    All(state){
      if(JSON.parse(localStorage.getItem("listd")) === null){
        state.list = JSON.parse(localStorage.getItem("lists"))
        localStorage.setItem('lists',JSON.stringify(state.list))
      }else{
        state.list = JSON.parse(localStorage.getItem("listd"))
        localStorage.removeItem('listd')
        localStorage.setItem('lists',JSON.stringify(state.list))
      }

      for (let i in state.tabs) {
        state.tabs[i].color = "black"
      }
      state.tabs[0].color = "red"
      localStorage.setItem('tab',JSON.stringify(state.tabs))

      this.commit('refresh')
    },
    // 查询未选中
    Active(state){
      if(JSON.parse(localStorage.getItem("listd")) === null){
        let listd = state.list.filter((item) => {
          return !item.checkbox;
        });
        localStorage.setItem('listd',JSON.stringify(state.list))
        state.list = listd
        localStorage.setItem('lists',JSON.stringify(state.list))
      }else{
        let lists = JSON.parse(localStorage.getItem("listd"))
        let listd = lists.filter((item) => {
          return !item.checkbox;
        });
        state.list = listd
        localStorage.setItem('lists',JSON.stringify(state.list))
      }
      for (let i in state.tabs) {
        state.tabs[i].color = "black"
      }
      state.tabs[1].color = "red"
      localStorage.setItem('tab',JSON.stringify(state.tabs))
    },
    // 查询选中
    Completed(state){
      console.log(JSON.parse(localStorage.getItem("listd")) === null);
      if(JSON.parse(localStorage.getItem("listd")) === null){
        let listd = state.list.filter((item) => {
          return item.checkbox;
        });
        localStorage.setItem('listd',JSON.stringify(state.list))
        state.list = listd
        localStorage.setItem('lists',JSON.stringify(state.list))
      }else{
        let lists = JSON.parse(localStorage.getItem("listd"))
        let listd = lists.filter((item) => {
          return item.checkbox;
        });
        state.list = listd
        localStorage.setItem('lists',JSON.stringify(state.list))
      }
      for (let i in state.tabs) {
        state.tabs[i].color = "black"
      }
      state.tabs[2].color = "red"
      localStorage.setItem('tab',JSON.stringify(state.tabs))
    },
    // 双击修改
    dbTest(state,data){
      state.list[data].readonly = false
      localStorage.removeItem('listd')
      localStorage.setItem('lists',JSON.stringify(state.list))
    },
    // 回车取消修改
    readonly(state,data){
      state.list[data].readonly = true
      localStorage.setItem('lists',JSON.stringify(state.list))
    }
  },
  actions: {
  },
  modules: {
  }
})

以上就是 vue 中实现 todos 具体效果的代码思路，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog

清风 与我
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用Vue实现todos（Vue CLI和VueX）
weixin_41105030的博客
04-27 2500
Vue CLI Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 # 全局安装脚手架 cnpm install -g @vue/cli # 快速创建一个项目 vue create todos # 打开项目 cd todos # 运行项目 cnpm run serve --open VueX Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理...
Vue学习笔记（一）基于Vue2的TodoList待办事项增删查案例 | 基于Node.js 使用Vue-CLI脚手架构建项目
希望每天都能进步一点点
06-19 684
需求案例说明：使用 Vue2模块化编程方式来实现下图的案例（样式是参照教程随便写的，这里以熟悉Vue2为主）项目结构：说明：Vue2支持模块化编程，一个 Vue后缀的文件表示一个Vue组件，其中通常包括 ：1） HTML 代码，即 标签， 2） JS代码，即标签 ，通常是返回 Key-Value 形式的对象，表示一些关于Vue组件的参数，包括变量和函数。 3）CSS样式代码，即 标签，通常使用 scoped 限制样式只在当前组件内有效。 根据界面可将这个Todo案例分为三个模块，分别是 Header、Bod
Vuex案例————todos(任务事项)
karlaofsky的博客
02-20 436
创建vuex项目，安装相关依赖：（axios、ant-design-vue（UI库））修改页面上展示的数据列表（全部、未完成，已完成）
Vue：实现TodoList案例（尚硅谷）
做一只猫的博客
08-04 9591
TodoList案例
【Mobx和React的职责划分】Todos综合案例分析（附源码）_前端todos案例分析(1)
最新发布
2401_84166811的博客
05-06 798
/ 思想：mobx Store去维护状态，input只需要把e.target.checked交给store让它来进行维护。// 把所有项的isDone属性，都按照传入的最新的状态修改。// 计算属性 只有所有子项都是选中的时候，才是选中的状态。{/* 单选框 受控和非受控 受控的方法*/}// 新增用户输入,受控方式维护输入框数据。alert(‘输入的内容不能为空’)// 已完成的数量的计算属性。{/* 新增输入框 */}{/* 删除按钮 */}{/* 全选框 */}
一个简单todos的例子
m0_45272038的博客
02-13 719
文章目录效果图代码 效果图 代码 主要代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link r
案例：todo
Henry_ID的博客
07-19 641
根据已有的文件让vue文件跑起来怎么做？ 1.根据已有的 package.json 下依赖包 yarn install / yarn(可以省略 install) 完成 todo案例 完整效果演示 todo案例-创建工程和组件 目标: 新建工程, 准备好所需的一切 需求1: 创建新工程 需求2: 分组件创建 – 准备标签和样式 分析： ​ ①：初始化todo工程 ​ ②：创建３个组件和里面代码 ​ ③：把styles的样式文件准备好 ​ ④: App.vue引入注册使用, 最外层容器类
10 Todo案例--创建工程
qq_38210427的博客
03-08 120
vue
Vue第7天-todos.zip
07-29
在本项目中，“Vue第7天-todos.zip”是一个关于Vue.js框架的实践教程，主要集中在构建一个待办事项（Todos）应用上。Vue.js是一个轻量级的前端JavaScript框架，以其易学易用、高性能和灵活性而广受欢迎。在这个教程...
vue 的 todos案例
05-17
在todos案例中，会有个`todos`数组，用于存储待办事项对象，每个对象包含`text`（描述）和`done`（完成状态）属性。 4. **组件化**：Vue的核心特性之一是组件系统。我们可以创建自定义的可重用组件，比如一个`...
vue组件化编程-todoList案例.zip
07-14
- Vue实例中的数据通过`data`选项定义，如`todos`数组存储待办事项。 - 使用`v-model`双向数据绑定，例如在输入框中添加新待办事项。 4. **计算属性与方法**： - `computed`属性用于计算值，例如计算已完成或未...
ToDo案例.html
08-09
最近学习了一个JQuery实战案例：todolist。主要是对localStorage本地存储数据的增、删、改、查操作与页面的渲染。综合性很强。 现在把这个案例作为笔记放在网络上，就算忘记了，也可以随时联网打开，把源码复制过来，根据需求更改使用。有需要的朋友也可以参考一下哦。而且增加了一些小功能，对内容的动态修改。
Vue TodoList完整案例
09-05
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：完成了所有的功能，如：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务、自动聚焦，本地保存等等。
todo-list案例（vue版本)
12-07
在本项目中，我们关注的是一个名为"todo-list"的Vue.js实现案例。Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。这个“todo-list”案例是一个基础的待办事项应用，它允许用户添加、编辑和删除待办事项，...
vuex-todos.zip
01-03
在这个名为 "vuex-todos.zip" 的压缩包文件中，我们可以看到一个使用 Vuex 构建的 Todo List 项目案例，名为 "vuex-demo2.1"。这个案例将帮助我们深入理解如何在实际应用中运用 Vuex。 1. **Vuex 的核心概念** - *...
使用vue实现todo清单
m0_52559388的博客
03-17 423
使用vue实现简易todo清单
Vuex的todos案例
Qiuxuntao的博客
12-31 1099
项目创建 创建的时候记得勾上vuex vue create vuex-todos 配置App根组件 <template> <div id="app"> <a-input placeholder="请输入任务" class="my_ipt" /> <a-button type="primary">添加事项</a-button> <a-list bordered :dataSource="list" class=
Vue基础案例-----Todos(1)
weixin_43135489的博客
03-06 630
Vue基础案例-----Todos(1)
todos案例练习
weixin_47169270的博客
08-15 918
todos案例 1 提供的数据和 HTML结构 引入todos的CSS样式 （HTML和 CSS 已经写好 我们需要改成Vue动态渲染的） 2 把数据渲染到页面上 根据completeed 的状态动态给li 绑定类名 未完成状态：不需要样式 完成状态： 类名为 completed 编辑状态：类名为 editing 如果completed 为 true 则给当前li 添加 completed input type=“checkbox"中绑定v-model时=的参数为唯
vue3todos案例
09-01
Vue3 Todos案例是一个使用Vue3编写的TodoList应用程序。该应用程序允许用户添加、编辑和删除待办事项，并可标记已完成的待办事项。 在该案例中，我们首先使用Vue3的Composition API来定义相关的响应式数据。我们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清风 与我

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值