参考文档
参考文档：https://blog.csdn.net/ll666888999/article/details/123789098
参考视频：https://www.imooc.com/learn/1300
官方文档查看文档：https://v3.cn.vuejs.org/
NavHrader中绑定键盘事件
<div> <input placeholder="请输入任务名称" v-model="value" @keydown.enter="enter"/> </div>
在setup()里面定义方法
setup() { let value = ref(""); let enter = () =>{ console.log(value.value) } return { value, enter }; },
运行结果
NavHeader.vue
<template> <div> <input placeholder="请输入任务名称" v-model="value" @keydown.enter="enter"/> </div> </template> <script> import { defineComponent, ref } from "vue"; export default defineComponent({ name: "navHeader", setup() { let value = ref(""); let enter = () =>{ console.log(value.value) } return { value, enter }; }, }); </script> <style scoped> </style>
NavMain中div取类名为item，button取类名为del，绑定点击事件
NavMain.vue
<template> <div> <div v-for="(item, index) in list" :key="index"> <div class="item"> <input type="checkbox" v-model="item.complete" /> {{ item.title }} <button class="del" @click="del(item,index)">删除</button> </div> </div> </div> </template> <script> import { defineComponent, ref } from "vue"; export default defineComponent({ name: "navMain", setup() { let list = ref([ { title: "吃饭", complete: false, }, { title: "睡觉", complete: false, }, { title: "打豆豆", complete: false, }, ]); //删除任务 let del=(item,index) =>{ console.log(item) console.log(index) } return { list, del }; }, }); </script> <style scoped lang='scss'> // .item{ // height: 35px; // line-height: 35px; // position: relative; // width: 160px; // cursor: pointer; // button { // position: absolute; // right:20px; // top:6px; // display:none; // z-index:99; // } // } // &:hover{ // background: #ddd; // button{ // display: block; // } // } </style>
运行结果
依次删除
NavFooter 样式名起类名container，里面取类名btn
button绑定点击事件clear
<template> <div class="container"> <div>已完成{{ isComplete }}/全部{{ all }}</div> <div v-if="isComplete > 0" class="btn"> <button @click="clear">清除已完成</button> </div> </div> </template> <script> import { defineComponent, ref } from "vue"; export default defineComponent({ name: "navFooter", setup() { let isComplete = ref(1); let all = ref(3); //清除已完成 let clear =() =>{ console.log('clear') } return { isComplete, all, clear }; }, }); </script> <style scoped> </style>
