<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>
|
