Vue--》实现todo-list组件的封装与使用

news2024/11/15 4:19:17

目录

项目结构

创建todolist组件

创建todoinput组件

创建todobutton组件


项目结构

今天用 vite 脚手架搭建一个 vue3 的小案例,vite的搭建过程参考:vite的搭建 。其项目结构组件构成如下:注意:因为使用的是 vite 框架,使用less样式需 npm i less -D 进行下载一下

在输入框输入信息之后,会加载到数组里面,在底部的按钮进行选择已完成和未完成的情况。

项目案例书写的样式是借助 bootstrap 样式的,不清楚如何使用请翻阅这篇文章:文章链接

创建todolist组件

我们根据App根组件中data里面return过来的列表数据循环遍历到todolist组件里面,借助bootstrap里面的列表组里面的样式遍历到页面即可,如下:

<template>
  <ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center" v-for="item in list" :key="item.id">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.done">
        <label class="custom-control-label" :for="item.id">{{ item.task }}</label>
    </div>
      <span class="badge badge-success badge-pill" v-if="item.done">完成</span>
      <span class="badge badge-warning badge-pill" v-else>未完成</span>
    </li>
  </ul>
</template>

<script>
export default {
  name:'MyList',
  props:['list']
}
</script>

<style lang="less" scoped>
.list-group{
  width: 400px;
}
</style>

当我们选中复选框时,我们去呈现一个文字被滑横线以及字体改变的效果,这里借助 v-bind 属性去动态绑定,借助 三元运算符 去实现即可,如下:

至此,todolist的基本功能已经实现。

创建todoinput组件

创建该组件依然借助 bootstrap 里面的样式,如下:

将样式直接粘到todoinput组件里面,进行一定的修改,如下:

<template>
<form class="form-inline">
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">任务</div>
    </div>
    <input type="text" class="form-control" placeholder="请输入任务"  style="width:356px">
  </div>
  <button type="submit" class="btn btn-primary mb-2">添加新任务</button>
</form>
</template>

接下来通过自定义事件,将todoinput里面的input输入的数据传递到根组件App上,如下:

给表单添加提交按钮,将input输入框输入的数据通过自定义事件传递给父组件身上。

<template>
<form class="form-inline" @submit.prevent="onFormInput">
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">任务</div>
    </div>
    <input type="text" class="form-control" placeholder="请输入任务"  style="width:356px" v-model="taskname">
  </div>
  <button type="submit" class="btn btn-primary mb-2">添加新任务</button>
</form>
</template>

<script>
export default {
  name:'MyInput',
  data(){
    return {
      taskname:''
    }
  },
  emits:['add'],
  methods:{
    onFormInput(){
      if(!this.taskname) return alert('列表不能为空!')
      this.$emit('add', this.taskname);
      this.taskname = ''
    }
  }
}
</script>

<style lang="less" scoped>

</style>

创建todobutton组件

创建该组件依然借助 bootstrap 里面的样式,如下:

将样式直接粘到该组件上,进行一定的修改,如下:

通过自定义事件,将 index 的值传递给根组件App上。

<template>
<div class='btn-container mt-3'>
  <div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn" :class="active===0 ? 'btn-primary' : 'btn-secondary'" @click="onClick(0)">全部</button>
  <button type="button" class="btn" :class="active===1 ? 'btn-primary' : 'btn-secondary'" @click="onClick(1)">已完成</button>
  <button type="button" class="btn" :class="active===2 ? 'btn-primary' : 'btn-secondary'" @click="onClick(2)">未完成</button>
  </div>
</div>
</template>

<script>
export default {
  name:'MyButton',
  props:{
    active:{
      type:Number,
      required:true,
      default:0
    }
  },
  emits:['update:active'],
  methods:{
    onClick(index){
      if(index==this.active) return 
      this.$emit('update:active',index)
    }
  }
}
</script>

<style lang="less" scoped>
.btn-container{
  width: 400px;
  text-align: center;
}
</style>

App根组件拿到index值,通过计算属性来判断按钮点击时的activeIndexBtn的值,来呈现不同的内容。

<template>
  <div>
    <TodoInput @add="onAddTaskname"></TodoInput>
    <Todolist :list="todotask"></Todolist>
    <TodoButton v-model:active="activeIndexBtn"></TodoButton>
  </div>
</template>

<script>
import TodoInput from './components/to-do/todoinput/TodoInput.vue'
import Todolist from './components/to-do/todolist/Todolist.vue'
import TodoButton from './components/to-do/todobutton/TodoButton.vue'
export default {
  data(){
    return {
      todolist:[
        {id:1,task:'吃早餐',done:false},
        {id:2,task:'吃午餐',done:true},
        {id:3,task:'吃晚餐',done:false}
      ],
      nextid:4,
      activeIndexBtn:0
    }
  },
  methods:{
    onAddTaskname(taskname){
      this.todolist.push({
        id:this.nextid,
        task:taskname,
        done:false
      })
      this.nextid++
    }
  },
  computed:{
    todotask(){
      switch(this.activeIndexBtn){
        case 0:
          return this.todolist
        case 1:
          return this.todolist.filter(x => x.done === true)
        case 2:
          return this.todolist.filter(x => x.done === false)
      }
    }
  },
  components:{
    Todolist,TodoInput,TodoButton
  }
}
</script>

<style>

</style>

至此,三个组件封装完成,案例的具体结构如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/132262.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

51单片机GMS短信自动存取快递柜

实践制作DIY- GC0103-直流电机PID速度控制 一、功能说明&#xff1a; 基于51单片机设计-GMS短信自动存取快递柜 功能介绍&#xff1a; STC89C52RC最小系统板0.96寸OLED显示器DY-SV17F串口语音播报模块4*4矩阵键盘GSM短信模块4路舵机&#xff08;模拟4个柜子&#xff09; ***…

再学C语言21:循环控制语句——do while循环

一、其他赋值运算符 除了最基本的赋值运算符&#xff0c;C还有多个赋值运算符 a b等于a a ba - b等于a a - ba * b等于a a * ba / b等于a a / ba % b等于a a % b 这些赋值运算符的优先级与赋值运算符同样低 运算符优先级&#xff1a;赋值运算符 < 关系运算符 <…

《C++程序设计原理与实践》笔记 第9章 类相关的技术细节

在本章中&#xff0c;我们继续关注主要的程序设计工具——C语言。本章主要介绍与用户自定义类型&#xff08;即类和枚举&#xff09;相关的语言技术细节。这些语言特性大部分是以逐步改进一个Date类型的方式来介绍的。采用这种方式&#xff0c;我们还可以顺便介绍一些有用的类设…

数据结构与算法_五大算法之分治算法

这篇笔记记录分治算法的思想和两道leetcode题。 分治算法思想&#xff1a; 规模为n的原问题的解无法直接求出&#xff0c;进行问题规模缩减&#xff0c;划分子问题&#xff0c;子问题相互独立而且和原问题解的性质是相同的&#xff0c;只是问题规模缩小了。递归地缩小问题规模…

用Python记录一场2023的烟花

弹指间&#xff0c;2023已经到来&#xff0c;新的一年&#xff0c;祝大家新年快乐&#xff0c;阖家幸福呀~~~ 好吧&#xff0c;进入正题&#xff0c;2023的到来&#xff0c;肯定少不了烟花吧&#xff08;外面不让放炮&#xff0c;那咱们就用python放炮【DOGE】&#xff09; 首…

JSON Web Tokens(JWT)简单使用

文章目录什么是JWT&#xff1f;JWD对字符串进行Base64加密JWT加密字符串解释JWT使用场景jwt 特点JWT token在线解密什么是JWT&#xff1f; JWT&#xff08;json web token&#xff09;&#xff0c;它并不是一个具体的技术实现&#xff0c;而更像是一种标准。 JWT规定了数据传输…

Flink系列Table API和SQL之:动态表、持续查询、将流转换成动态表、更新查询、追加查询、将动态表转换为流、更新插入流(Upsert)

Flink系列Table API和SQL之&#xff1a;动态表、持续查询、将流转换成动态表、更新查询、追加查询、将动态表转换为流、更新插入流一、表和流的转换二、动态表三、持续查询四、将流转换成动态表五、更新查询六、追加查询七、将动态表转换为流八、更新插入流(Upsert)一、表和流的…

综合能源系统电压稳定研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【锟斤拷�⊠是怎样炼成的】——两分钟帮你彻底弄懂计算机的编码原理

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; &#x1f33b;&#x1f33b;&#x1f33b;Hello&#xff0c;大家好&#xff0c;我是天寒雨落&#xff0c;一名有趣的博主&#xff0c;小白一枚&#xff0c;多多关照&#x1f61c;&#x1f61c…

解决vue-cli项目打包出现空白页和路径错误的问题

今天为大家分享一篇解决vue-cli(&#xff08;vue-cli2.x版本&#xff09;项目打包出现空白页和路径错误的问题。具有很好的参考价值。希望对大家有所帮助。 vue-cli项目打包&#xff1a; 1. 命令行输入&#xff1a;npm run build 打包出来后项目中就会多了一个文件夹dist&am…

k8s1.23.15版本二进制部署/扩容及高可用架构详解

前言 众所周知&#xff0c;kubernetes在2020年的1.20版本时就提出要移除docker。这次官方消息表明在1.24版本中彻底移除了dockershim&#xff0c;即移除docker。但是在1.24之前的版本中还是可以正常使用docker的。考虑到可能并不是所有项目环境都紧跟新版换掉了docker&#xff…

五、树和二叉树

一、定义及基本术语 详见书本P111~113 二叉树不是树的特殊情况&#xff0c;它们是两个概念&#xff0c;但有关树的基本术语对二叉树都适用。 二叉树的子树一定要区分左子树还是右子树&#xff0c;即使只有一棵子树也一定要说明是左子树还是右子树&#xff0c;树只有一个孩子的…

事务隔离:为什么你改了我还看不见?

提到事务&#xff0c;你肯定不陌生&#xff0c;和数据库打交道的时候&#xff0c;我们总是会用到事务。最经典的例子就是转账&#xff0c;你要给朋友小王转 100 块钱&#xff0c;而此时你的银行卡只有 100 块钱。 转账过程具体到程序里会有一系列的操作&#xff0c;比如查询余…

迎接2023,用JAVA演奏“新年”

&#x1f60a;你好&#xff0c;我是小航&#xff0c;一个正在变秃、变强的文艺倾年。 &#x1f514;2023年快要到来啦&#xff0c;再此祝大家诸事顺遂&#xff0c;所见所盼皆如愿。 &#x1f514;本文讲解如何使用Java演奏一首歌曲&#xff0c;一起卷起来叭&#xff01; 众所周…

【复习】计算机网络学习笔记

前言 本篇笔记方便本人用于复习回顾知识点&#xff0c;内容庞杂&#xff0c;见谅。含有目录方便大家跳转复习&#xff01; 此复习笔记总结于 湖科大教书匠出品&#xff1a;深入浅出计算机网络 微课视频 此笔记尚未完结&#xff0c;持续更新中… 文章目录前言第一章 概述1.1 …

高并发系统设计 -- 服务限流算法

常见的限流算法 漏桶算法 漏桶法的关键点在于漏桶始终按照固定的速率运行&#xff0c;但是它并不能很好的处理有大量突发请求的场景&#xff0c;毕竟在某些场景下我们可能需要提高系统的处理效率&#xff0c;而不是一味的按照固定速率处理请求。 关于漏桶的实现&#xff0c;u…

快速入门 .NET nanoFramework 开发 ESP32-Pico 应用

本文是一篇适合初学者的 .NET nanoFramework 保姆级入门教程&#xff0c;并提供了基本的入门程序并介绍了微雪的 ESP32-S2-Pico 使用 .NET nanoFramework 开发过程的基础知识。 目录 1. 背景 1.1 .NET IOT 与 .NET nanoFramework 1.2 微控制器 1.3 实验板介绍 2. 搭建 .NET…

移动Web【空间转换[空间位移、透视、空间旋转、立体呈现、3D导航、空间缩放]、动画、综合案例】

文章目录一、空间转换1.1 空间位移1.2 透视1.3 空间旋转1.4 立体呈现1.5 3D导航1.6 空间缩放二、动画2.1 动画的实现步骤2.2 动画属性三、综合案例2.1 走马灯一、空间转换 空间&#xff1a;是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间&#xff0c;z轴位置与…

Android实战进阶 - 拉取项目代码后多处报红?如资源找不到该如何处理?

近期参与了一个我很感兴趣的项目&#xff0c;项目内用到了很多新东西&#xff0c;例如组件化、模块化、ARouter路由、MVI框架、Kt高阶用法等等&#xff0c;感觉可以学一段时间… Gradle相关Blog Android Gradle - Gradle、Gradle plugin 基础认知Android Gradle - AndroidStud…

函数极限定义的理解

回顾一下非正式的极限定义法。当x从任意一侧(自左向右或自右向左)接近常量 c时&#xff0c;如果f(x)变得任意接近一个单独的值L, 则当x接近c时f(x)的极限值是L, 写作 咋一看&#xff0c;这个定义似乎非常技术化。即使这样&#xff0c;它仍然是非正式的&#xff0c;因为它没有给…