首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue3.0实现todolist-实现todolist每个组件需要用到的方法

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

作者头像
王小婷
发布2022-09-28 09:24:48
2520
发布2022-09-28 09:24:48
举报
文章被收录于专栏:编程微刊编程微刊
参考文档

参考文档: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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-09-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 参考文档
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档