1 <template>
2 <div id="app">
3 <div class="todo-main">
4 <input type="text" v-model="inputVal" />
5 <button @click="addVal">添加</button>
6 <ul>
7 <li v-for="(item, index) in todolist" :key="index">
8 {{ item }}
9 <button @click="deleteVal(index)">删除</button>
10 </li>
11 </ul>
12 共有:{{ todolist.length }}条数据
13 </div>
14 </div>
15 </template>
16
17 <script lang="ts">
18 import { reactive, toRefs,onMounted } from "vue";
19 interface DataProps {
20 todolist: string[];
21 inputVal: string;
22 deleteVal: (index: number) => void;
23 addVal: () => void;
24 }
25 export default {
26 setup() {
27 const data: DataProps = reactive({
28 inputVal: "",
29 todolist: ["参加需求评审会", "完善新增逻辑"],
30 addVal: () => {
31 data.todolist.push(data.inputVal);
32 data.inputVal = "";
33 },
34 deleteVal: (index: number) => {
35 data.todolist.splice(index, 1);
36 },
37 });
38 const refData = toRefs(data);
39 onMounted(() => console.log('组件已加载！'))
40 return {
41 ...refData,
42 };
43 },
44 };
45 </script>
