【React工作记录一百肆拾】Vue3+typesctipt实现todolist效果

最新推荐文章于 2025-05-21 15:39:37 发布

前端大歌谣

最新推荐文章于 2025-05-21 15:39:37 发布

阅读量156

点赞数

分类专栏：前端项目工作实战文章标签： react.js javascript vue.js

本文链接：https://blog.youkuaiyun.com/geyaoisnice/article/details/134568021

版权

前端项目工作实战专栏收录该内容

146 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文由歌谣分享，介绍如何使用Vue3和TypeScript构建一个TodoList应用。详细讲述了TodoInput、TodoList及其子组件TodoItem的实现，以及hooks的使用，并展示了最终的运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

大家好我是歌谣今天继续给大家带来一个V3+ts实现的todolist的项目

目录结构

在这里插入图片描述

主要代码

TodoInput----index.vue

<template>
    <div>
        <input type="text" v-model="todoValue" @keyup="setTodoValue"/>
    </div>
</template>

<script lang="ts"> 
import { defineComponent,reactive,ref } from 'vue';
import {IUseTodo, useTodo} from "../../hooks/index"
export default defineComponent({ 
  name:"TodoInput",
  setup(){
    const todoValue=

了解本专栏