vue3实现todoList

最新推荐文章于 2024-06-02 22:12:52 发布

原创最新推荐文章于 2024-06-02 22:12:52 发布 · 444 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

59 篇文章

订阅专栏

该博客介绍了如何在Vue.js应用中结合TypeScript创建一个简单的待办事项列表。通过`useAppData`实用程序，实现了从localStorage读取和保存待办事项，展示了双向数据绑定、事件监听以及动态渲染列表的功能。此外，还涉及了如何使用Vue的ref和setup语法来管理组件状态。

App.vue

<template>
  <h2>App</h2>
  <input type="text" v-model="todo" />
  <button @click="add">test</button>
  <div class="wrap" v-for="(item,index) in data" :key="index">
    {{item}}
    <div class="delete" @click="deleteTodo(index)">Del</div>
  </div>
</template>
<script lang="ts">
// 引入子级组件Child
import { defineComponent, ref } from 'vue'
import useAppData from './utils/useAppData'
export default defineComponent({
  name: 'App',
  // 注册组件
  setup() {
    const {getData,setData}=useAppData()
    console.log(getData());
    
    let data=ref(JSON.parse(getData()));
    const todo=ref("");    
    const add=():void=>{
      data.value.push(todo.value)
      setData(data.value);
    }
    const deleteTodo=(index:number):void=>{
      data.value.splice(index,1);
      setData(data.value)
    }
    return {
      data,
      todo,
      add,
      deleteTodo
    }
  },
})
</script>
<style scoped>
  .wrap{
    width: 300px;
    height: 20px;
    border-radius: 5px;
    background: #ccc;
    margin-top: 10px;
    position: relative;
  }
  .delete
  {
    position: absolute;
    font-size: 10px;
    line-height: 19px;
    border-radius: 30%;
    cursor: pointer;
    background:#dc3545	;
    top: 0;
    right: 0;
    bottom: 0;
  }
</style>

useAppData

import { reactive} from 'vue' 
const getData=():any=>{
    let data=localStorage.getItem("todoList")
    if(data)
    {
        return data;
    }
    else
    {
        return []
    }
}
const setData=(data:Array<String>)=>{
    localStorage.setItem("todoList",JSON.stringify(data));
}

export default function() {
    return {getData,setData}
}```