测试 

 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>

 

posted @ 2020-12-20 00:03  刘文豪  阅读(77)  评论(0)    收藏  举报