vue3+ts小案例：代办事项

最新推荐文章于 2025-05-17 18:35:22 发布

原创最新推荐文章于 2025-05-17 18:35:22 发布 · 583 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #typescript #javascript

vue 专栏收录该内容

36 篇文章

订阅专栏

这是一个使用Vue.js和TypeScript编写的待办事项列表应用。应用包含输入框用于添加待办事项，以及动态显示并可删除的待办事项列表。代码结构清晰，展示了如何在Vue中进行状态管理和元素交互。

<template>
  <div class="home">
    <h1>待办事项</h1>
    <div>
      <input type="text" v-model="inpVal">
      <button @click="add">增加</button>
    </div>
    <div v-for="(item,index) in todoList">
      <span>{{item.text}}</span>
      <button @click="del(index)">删除</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue';

export default defineComponent({
  setup(){
    interface Todo{
      text:string,
      done:boolean
    }
    let todoList=reactive<Array<Todo>>([
      {
        text:'去绍兴',
        done:false
      },{
        text:'去西湖',
        done:true
      }
    ])
    const inpVal=ref('');

    const add=()=>{
      const item={
        text:inpVal.value,
        done:false
      }
      todoList.push(item);
      inpVal.value='';
    }
    const del=(index: any)=>{
      todoList.splice(index,1)
    }
    return {
      todoList,
      inpVal,
      add,
      del,
    }
  }
});
</script>

<style lang="scss"></style>