vue、less、element写todolist

已于 2022-11-29 23:52:30 修改
阅读量223 收藏
点赞数
分类专栏： vue基础笔记 文章标签： vue.js 前端 javascript
于 2022-11-23 11:37:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68915174/article/details/127993248
版权

效果图

一、运用element写html

        划分区域，头部的添加以及下面的完成和未完成板块，可以运用<el-card>来获得卡片

        1.头部

                input输入框组件

    <!-- 头部板块，el-header顶栏容器 -->
    <el-header style="text-align: left">
      <div class="title">
        <span style="font-size:20px">TodoList</span>
        <!-- input输入框组件 -->
        <el-input
          v-model="input"
          placeholder="Please input"
          clearable 
          //v-on指令，.enter指回车确认修饰符
          @keyup.enter="submit"
        />
      </div>
    </el-header>

        2.主体板块

<!-- 主体板块，主要区域容器 -->
    <el-main style="text-align: left;margin-top:15px;">
      <!-- space间距组件，direction="vertical"定义子元素垂直排序，也可以用wrap实现不换行 -->
      <el-space direction="vertical">

        <!-- card用来将已完成和未完成添加到不同的是card中，使得其以两个卡片的形式出现 -->

        <!--未完成板块-->
        <el-card style="width: 450px" class="todoList">

          <p style="font-size:18px">todo</p>

          <!--任务列表-->
          <div class="todo">
            <span>{{ input }}</span>
            <span>{{ times }}</span>
            <el-checkbox v-model="checked" @change="handleChange()" />
            <el-button text size="small" @click="deleteMessage()">
              <el-icon style="vertical-align: middle" size="15">
                <Delete />
              </el-icon>
            </el-button>
          </div>

        </el-card>

        <!--已完成板块-->
        <el-card style="width: 450px" class="finishList">

          <sp style="font-size:18px">finish</p>

          <!--任务列表-->
          <div class="finish">
            <span>{{ input }}</span>
            <span>{{ times }}</span>
            <el-checkbox v-model="checked" @change="handleChange()" />
            <el-button text size="small" @click="deleteMessage()">
              <el-icon style="vertical-align: middle" size="15">
                <Delete />
              </el-icon>
            </el-button>
          </div>

        </el-card>

      </el-space>
    </el-main>

知识点：

          <div class="todo" >
            <span>{{ item.input }}</span>
            <span>{{ item.times }}</span>
            <el-checkbox v-model="item.checked" @change="handleChange()" />
            <el-button text size="small" @click="deleteMessage()">
              <el-icon style="vertical-align: middle" size="15">
                <Delete />
              </el-icon>
            </el-button>
          </div>

1.icon图标：

       （1） 使用el-icon为SVG图标提供属性

        <el-icon>

                <Delete/>

        </el-icon>

        （2）Delete组件需要先引入注册才能使用

                引入：import { Delete } from "@element-plus/icons-vue";

                注册：components: { Delete },

二、运用less写style

<style lang="less">
p{
  margin-bottom: 10px;
}
.todo {
  border: 1px solid var(--el-border-color);
  padding: 0px 5px;
  margin-bottom: 5px;
  // margin-top: 5px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.finish {
  .todo();
  color: gray;
  text-decoration: line-through;
}
</style>

知识点：混合，将一组属性从一组规则集包含（或混入）另一个规则集

        .todo{}

        .finish{.todo()}

三、运用vue写js部分

        1.思路

1.在data()里面初始化所需变量以及属性

data(){
    input:"",
    times:"",
    checked:"",
    list:[]
},

2.在method中撰写方法

        （1）回车获取input数据并添加到list中

submit(){
    //判空
    if(!this.input.trim()){
        alert("请输入数据");
        return;
    }
    //push添加数据
    this.list.push({
        input:this.input,
        times:this.times,
        checked:false
    });
}

        （2）获取当前时间

    getNowTime() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var dates = date.getDate();
      var hours = date.getHours()<10?"0"+date.getHours():date.getHours();
      var minute = date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes();
      var second = date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        dates +
        " " +
        hours +
        ":" +
        minute +
        ":" +
        second
      );
    },

                将push中的this.times替换成this.getNowTime()，并删除掉data()里面对times的初始化

        （3）获取checkbox状态并存储到本地，实现点击删除该列

//获取checkbox状态并存储到本地
handleChange（item）{
    item.checked=!item.checked;
    localStorage.serItem("todolist",JSON.stringify(this.list)
}
//点击实现删除该列
deleteMessage(index){
    this.list.splice(index,1);
}

        （4）将push后的新数组存储到本地，并清空input的内容

submit(){
    this.input = "";
    localStorage.setItem("todolist", JSON.stringify(this.list));
}

        （5）将list的内容渲染到页面

<div class="todo" v-for="(item,index) in list">
    <span>{{item.input}}</span>
    <span>{{item.times}}</span>
    <el-checkbox v-model="item.checked" @change="handleChange(item)" />
    <el-button text size="small" @click="deleteMessage(index)">
        <el-icon style="vertical-align:middle" size="15>
            <Delete />
        </el-icol>
    </el-button>
</div>

        2.会发现上面的代码繁琐又存在很多问题，于是可以进行优化

       

1.对data的优化：

                可以直接通过将属性都放在一个对象里面实现优化

  data() {
    return {
      input: "",
      list: [
        { id: 1, input: "ss", times: "2022-11-22 16:6:4", checked: true },
        { id: 2, input: "ss", times: "2022-11-22 16:6:4", checked: true },
        { id: 3, input: "ss", times: "2022-11-22 16:6:4", checked: false },
      ],
    };
  },

     

  2.对submit的优化

    submit() {
      if (!this.input.trim()) {
        alert("请输入数据");
      } else {
        this.list.push({
          input: this.input,
          times: this.getNowTime(),
          checked: false,
        })
        this.input = ""
      }
    },

     

  2.对checkbox的优化。

                因为v-model可以绑定property并侦听相关事件，所以当我点击checkbox时，checked会自动发生变化，所以可以直接删除对应的点击事件

<el-checkbox v-model="item.checked"/>
<el-button text size="small" @click="deleteMessage(index)>
    <el-icon style="vertical-align: middle" size="15">
        <Delete />
    </el-icon>
</el-button>

       

  3.区分已完成和未完成

                通过计算属性来区分完成和未完成

computed:{
    //已完成
    checkedList(){
        return this.list.filter(item =>item.checked);
    }
    //未完成
    uncheckedList(){
        return this.list.filter(item =>!item.checked);
    }
}
//未完成
<div class="todo" v-for="(item,index) in uncheckedList">
    <span>{{item.input}}</span>
    <span>{{item.times}}</span>
    <el-checkbox v-model="item.checked" />
    <el-button text size="small" @click="deleteMessage(index)">
        <el-icon style="vertical-align:middle" size="15>
            <Delete />
        </el-icol>
    </el-button>
</div>

//已完成
<div class="todo" v-for="(item,index) in checkedList">
    <span>{{item.input}}</span>
    <span>{{item.times}}</span>
    <el-checkbox v-model="item.checked" />
    <el-button text size="small" @click="deleteMessage(index)">
        <el-icon style="vertical-align:middle" size="15>
            <Delete />
        </el-icol>
    </el-button>
</div>

                 知识点：

                        this.list.filter(item => item.checked)

                        ① filter过滤元素，item.checked为true的情况下完成过滤

                        ② 箭头函数的简写：

                                (item)=>{return true}

                                1.当参数只有一个的时候可以省略()      

                                        (item)=>{return true}       item=>return true

                                        (item,index)=>{return true}     //不能简写

                                2.当{}里面可以直接返回函数体的时候可以省略{}

                                        item=>true

                                3.通过三元运算符简化if..else

                                        item=>{ if(Math.random()=>0.5{

                                                                return true

                                                        }else{

                                                                return false

                                                        }

                                        }

                                        //item=>Math.random()=>0.5?true:false

        4.存储到本地的优化

                运用watch监听器来监听list的改变并存储到本地

watch:{
    list:{
        deep:true,
        handler(val){
            localStorage.setItem("todolist",JSON.stringify(this.list))
            //localStorage.setItem("todolist",JSON.stringify(val))
        }
    },
},

                 知识点：

                        watch：{

                                input（val,oldVal){

                                        consloe.log('this.input 发生了变化","改变后的值为：",val,"改变前的值为:",oldVal)

                                }

                        }

                        因为list为引用数据类型，不能直接判等，所以无法监听判断数据是否发生变化，但是用deep深度监听可以实现

   

    5.将本地数据渲染到页面上优化

                直接将本地的列表赋给list，然后通过渲染list渲染到页面上

data(){
    return {
        input:'',
        list:localStorage.getItem("todlist")?JSON.parse(localStorage.getItem("todolist")):[],
    };
},

     

  6.对删除操作的优化

                因为checkedList和uncheckedList只读，所以需要给list中的数据添加唯一性（id）

  data() {
    return {
      input: "",
      list: [
        { id: 1, input: "ss", times: "2022-11-22 16:6:4", checked: true },
        { id: 2, input: "ss", times: "2022-11-22 16:6:4", checked: true },
        { id: 3, input: "ss", times: "2022-11-22 16:6:4", checked: false },
      ],
    };
  },
//点击实现删除该列
deleteMessage(id){
    consol.log("删除列的id":id)
}
           <el-button text size="small" @click="deleteMessage(id)">
              <el-icon style="vertical-align: middle" size="15">
                <Delete />
              </el-icon>
            </el-button>

        但由于已完成和未完成和id没有关系，所以直接选择删除点击的该条数据

            <el-button size="small" text @click="deleteList(item)">
              <el-icon size="18">
                <Delete />
              </el-icon>
            </el-button>
    deleteList(item){
      this.list.splice(this.list.indexOf(item),1)
    }

四、整体代码

<template>
  <el-container style="width: 500px">
    <el-header style="text-align: left">
      <div class="title">
        <p style="font-size:20px">TodoList</p>
        <el-input
          v-model="input"
          placeholder="Please input"
          clearable 
          @keyup.enter="submit"
        />
      </div>
    </el-header>

    <!-- 主体板块，主要区域容器 -->
    <el-main style="text-align: left;margin-top: 15px;">
      <el-space direction="vertical">
        <el-card style="width: 450px" class="todoList">
          <p style="font-size:18px">todo</p>
          <div class="todo" v-for="(item, index) in uncheckedList" >
            <span>{{ item.input }}</span>
            <span>{{ item.times }}</span>
            <el-checkbox v-model="item.checked" />
            <el-button text size="small" @click="deleteMessage(item)">
              <el-icon style="vertical-align: middle" size="15">
                <Delete />
              </el-icon>
            </el-button>
          </div>
        </el-card>

        <el-card style="width: 450px" class="finishList">
          <p style="font-size:18px">finish</p>
          <div class="finish" v-for="(item, index) in checkedList">
            <span>{{ item.input }}</span>
            <span>{{ item.times }}</span>
            <el-checkbox v-model="item.checked" />
            <el-button text size="small" @click="deleteMessage(item)">
              <el-icon style="vertical-align: middle" size="15">
                <Delete />
              </el-icon>
            </el-button>
          </div>
        </el-card>
      </el-space>
    </el-main>
  </el-container>
</template>

<script>
import { Delete } from "@element-plus/icons-vue";

export default {
  components: {
    Delete,
  },
  data() {
    return {
      input: "",
      list: localStorage.getItem("todolist")
        ? JSON.parse(localStorage.getItem("todolist"))
        : [],
    };
  },
  computed:{
    checkedList(){
      return this.list.filter(item=>item.checked);
    },
    uncheckedList(){
      return this.list.filter(item=>!item.checked);
    }
  },
  watch: {
    list: {
      deep: true,
      handler(val) {
        console.log('this.list 发生了改变');
        localStorage.setItem("todolist", JSON.stringify(val))
      }
    }
  },
  methods: {
    submit() {
      if (!this.input.trim()) {
        alert("请输入数据");
      } else {
        this.list.push({
          input: this.input,
          times: this.getNowTime(),
          checked: false,
        })
        this.input = ""
      }
    },
    getNowTime() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var dates = date.getDate();
      var hours = date.getHours()<10?"0"+date.getHours():date.getHours();
      var minute = date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes();
      var second = date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        dates +
        " " +
        hours +
        ":" +
        minute +
        ":" +
        second
      );
    },

    deleteMessage(item) {
      this.list.splice(this.list.indexOf(item),1);
    },
  },
};
</script>

<style lang="less">
p{
  margin-bottom: 10px;
}
.todo {
  border: 1px solid var(--el-border-color);
  padding: 0px 5px;
  margin-bottom: 5px;
  // margin-top: 5px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.finish {
  .todo();
  color: gray;
  text-decoration: line-through;
}
</style>

Ther19
关注
专栏目录
React实现Todolist
csdn_zsdf的博客
03-15 9681
一个todolist基本的功能点包括： 点击复选框标记完成或者未完成，且相应的文字出现删除线 从列表中移除item 添加item 首先它是由todolist title 、todolist、和addtodo三部分组成。由于todolist title 和addtodo比较简单，在这里只将todolist拆分成组件。 创建一个ListItem组件。含有一个render方法 class List...
Vue+elementUI 实现动态增删List成员模块.vue
08-13
Vue+elementUI 实现动态增删List成员模块 ，优化增删逻辑，简介代码复制即用
vuex + elementui实现一个Todolist应用
weixin_44550463的博客
10-27 1947
1
element 封装list
昨天1990的专栏
02-19 2870
List组件 <template> <div class="m-list"> <el-table stripe :data="data" v-loading="loading" :fit='true' @row-dblclick="tableConfig.rowDblclick" @row-click="tableConfig.rowClick"...
【vue+El-element】实现todolist
糯米w的博客
08-25 1165
好像拖更了很久，很抱歉，最近想了一下css和js等内容还是不总结了，本来内容就多，不是一篇博客能说完的，而且我也只学了皮毛，以后还是通过实例的方式来分享一下学过的东西，希望能帮到大家。 目录 一、实现功能 ​二、实现方法 1.数据的传递 2.按钮的实现 3.全选按钮的实现 4.记录用户键盘数据 三、源代码（感兴趣自己试试） 总结 前言 最初了解到这个todolist的时候我还感觉挺简单的，但实现确实遇到了好多问题（我太菜了），而且在网上看大佬的文章，看不懂（哭），所以我会.
基于Vue.js的element UI中实现todolist
changan2018的博客
07-06 833
基于Vue.js在element UI中选择输入框实现todolist
vue中使用element-tiptap
想好了再写！
06-30 4415
安装 npm install --save element-tiptap或者yarn add element-tiptap main.js文件引入（全局引入） // 引入element-tiptap import { ElementTiptapPlugin } from 'element-tiptap'; // import element-tiptap 样式 import 'element-tiptap/lib/index.css'; //使用 Vue.use(ElementTiptapPlugin,{
vue基础用法&基础原理整理
热门推荐
hangao233的博客
04-06 6万+
vue基础用法&基础原理整理 1. vue基础知识和原理 1.1 初识Vue 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 demo容器里的代码被称为【Vue模板】 Vue实例和容器是一一对应的 真实开发中只有一个Vue实例，并且会配合着组件一起使用 {{xxx}}是Vue的语法：插值表达式，{{xxx}}可以读取到data中的所有属性 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
用vue做todolist
weixin_30835933的博客
09-04 117
<template> <div class="hello"> <div style="height:25px;line-height:25px;color:#a26777">This is Todos</div> <input type="text" style="width: 100%;height: 30px...
Vue学习3
Kerryliuyue的博客
04-30 869
组件化编程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen
前端学习笔记____Vue2+Vue3全家桶
weixin_55181759的博客
08-09 7252
前端学习笔记____Vue2+Vue3全家桶前言第一部分 VUE基础一、Vue简介1. Vue是什么?2. Vue发展历史3. Vue的特点二、初识Vue1. Vue模板语法2. 数据绑定▲单向数据绑定v-bind▲ 双向数据绑定v-model3. el与data的两种写法▲ el的两种写法▲ data的两种写法4. MVVM模型5.数据代理6. 事件处理▲ 事件处理v-on▲ 事件修饰符▲ 键盘事件key7. 计算属性computed与监视(侦听)属性watch▲ 计算属性－computed▲ 监视(侦听
Vue前端开发规范
qq_45494741的博客
05-21 526
Vue前端开发规范文档 目录Vue前端开发规范文档一、概述二、方针三、环境要求四、编码规范4.1 HTML / Template 编码规范4.1.1 语法4.1.2 HTML5 doctype4.1.3 语言属性4.1.4 字符编码4.1.5 引入 CSS 和 JavaScript 文件4.1.6 减少标签的数量4.1.7 属性顺序4.1.8 语义化4.2 CSS / Less 编码规范4.2.1 命名4.2.2 语法4.2.3 代码风格4.2.4 样式兼容性4.2.5 选择器权重（样式覆盖）4.2.6
Vue学习-1-入门
baidu_38126306的博客
11-03 520
Vue 狂神说 1. 概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关心视图层View，方便与第三方或既有项目整合； 遵循SoC原则关注点分离原则； HTML + CSS + JS ：视图，给用户看，刷新后台给的数据； 网络通信：Axios； 页面跳转：Vue-router 状态管理：Vuex Vue-UI：ICE，Element U
VUE的基础知识
qq_46065861的博客
09-23 826
注意：先看菜鸟教程和手册 菜鸟教程 官方文档 一、VUE的介绍 面试或者笔试要问 类似于 view，vue是一套构建用户界面的`渐进式框架 Vue 只关注视图层， 采用自底向上增量开发`的设计。 vue是基于MVVM（M:model(数据处理) V:view VM:viewmodel）设计模式，支持数据的双向绑定(v-model) MVC设计模式: M model数据层(进行价格之类的数据处理) 、V：view视图层、C:conreol控制层（判断、循环等逻辑） 与js不同的是不需要再获取元素了 ..
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1243
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 929
Vue 2 中使用 Vue I18n 插件实现中英文切换
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
2301_77358195的博客
09-30 974
自定义指令
vue-live2d看板娘集成方案设计使用教程
最新发布
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1061
vue-live2d看板娘集成方案设计使用教程
vue2 element todolist
04-12
的前端代码该怎么写？ 您可以通过编写Vue组件来实现一个TodoList。在Vue组件中，您可以使用Element UI来创建页面元素和布局。您还可以使用Vuex来管理TodoList的状态和操作。在最终渲染时，您可以使用Vue的指令系统来渲染TodoList的每一行数据。希望这可以帮助您开始构建您的应用程序！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值