Vue--》实现todo-list组件的封装与使用
创始人
2024-05-04 01:33:26
0次

目录

项目结构

创建todolist组件

创建todoinput组件

创建todobutton组件

项目结构

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

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

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

创建todolist组件

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

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

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

创建todoinput组件

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

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

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

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

创建todobutton组件

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

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

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

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

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

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：数字验证学习笔记——SystemVerilog芯片验证20 ——线程间的通信

下一篇：计算机基础知识（基础入门小白专属）八

相关内容

热门资讯

安卓系统短消息提醒,安卓系统短... 你有没有发现，手机里的短消息提醒功能有时候就像一个贴心的管家，有时候又像个爱闹腾的小孩子？今天，咱们...
安卓系统如何跳过密码,安卓系统... 你是不是也和我一样，有时候手机锁屏密码设置得太复杂，每次解锁都要费好大一番力气？别急，今天就来教你怎...
鸿蒙系统功能与安卓,功能对比与... 你知道吗？最近手机圈里可是热闹非凡呢！华为的新操作系统鸿蒙系统（HarmonyOS）一经推出，就引发...
安卓系统卡苹果系统不卡,揭秘两... 你有没有发现，身边的朋友都在争论安卓系统和苹果系统哪个更好？其实，这个问题就像是在问谁家的孩子更聪明...
安卓系统卡解决了吗,安卓系统卡... 你有没有遇到过安卓手机卡顿的问题？是不是每次打开应用都感觉像蜗牛爬行？别急，今天就来聊聊这个让人头疼...
华为安卓系统下载软件,畅享海量... 你有没有想过，手机里的系统就像是我们的大脑，而下载的软件就像是大脑里的各种功能？今天，就让我带你一起...
平板安卓7系统好吗,体验流畅与... 你有没有想过，你的平板电脑的安卓7系统到底怎么样呢？是不是觉得它既熟悉又有点陌生？别急，今天咱们就来...
鸿蒙系统和安卓10,跨时代操作... 你知道吗？最近科技圈可是炸开了锅，因为华为的新操作系统鸿蒙系统横空出世，而且它竟然和安卓10杠上了！...
苹果安卓和鸿蒙系统,三大操作系... 你有没有发现，现在的手机市场就像是一场精彩纷呈的武林大会，各路英雄齐聚一堂，各显神通？没错，说的就是...
鸿蒙怎么还原安卓系统,系统还原... 你是不是也和我一样，对鸿蒙系统里的安卓应用情有独钟呢？最近，不少小伙伴都在问，鸿蒙怎么还原安卓系统？...
荣耀10改回安卓系统,重拾纯净... 你有没有想过，你的荣耀10手机，曾经那般风光无限，如今却想要改回安卓系统呢？这可不是一件小事，得好好...
华为安卓系统设置权限,深度解析... 亲爱的手机控们，你是否曾为手机里那些层出不穷的权限请求而头疼？别急，今天就来给你详细解析一下华为安卓...
安卓刷系统的软件,探索系统升级... 你有没有遇到过手机卡顿、系统老化的问题？别急，今天就来给你安利几款超好用的安卓刷系统软件，让你的手机...
安卓系统投影怎么升级,轻松实现... 你有没有发现，你的安卓系统投影最近有点儿慢吞吞的，是不是也想给它来个升级，让它焕发新生呢？别急，今天...
安卓手机系统怎样加速,享受流畅... 你有没有发现，你的安卓手机最近变得有点“慢吞吞”的？别急，别急，今天就来给你支几招，让你的安卓手机瞬...
安卓系统怎么安装的,安卓系统安... 你有没有想过，你的安卓手机里那些神奇的APP是怎么来的呢？是不是觉得安装个APP就像变魔术一样简单？...
安卓系统下儿童编程,开启编程启... 你有没有想过，在这个科技飞速发展的时代，连小朋友也开始学习编程了呢？没错，就是那个在安卓系统下，孩子...
微信安卓系统转苹果系统,轻松实... 你有没有想过，从微信安卓系统转到苹果系统，这中间的转换过程，就像是一场说走就走的旅行，充满了未知和惊...
如何刷安卓8.0系统,安卓8.... 你有没有想过，让你的安卓手机升级到最新的8.0系统，让它焕发出全新的活力呢？别急，今天我就来给你详细...
安卓系统里查看路由,安卓系统下... 你是不是也和我一样，对家里的无线网络充满了好奇？想知道安卓手机里怎么查看路由器信息？那就跟着我一起探...