Vue3.0实现todolist-实现todolist每个组件需要用到的方法

Posted 2022-10-08

参考文档

参考视频：​​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>