Vue3.0实现todolist-实现todolist每个组件需要用到的方法
2023-06-13 09:11:15 时间
参考文档
参考文档: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>
相关文章
- vue 子组件调用父组件方法传参,父组件调用也传参_面试题vue组件封装思路
- 离线安装 VSCode 扩展组件方法及批量安装脚本分享
- Vue 组件通信六种方法
- vue 父组件调用子组件的函数_vue子组件触发父组件方法
- Vue子组件调用父组件的方法及传值「建议收藏」
- Vue子组件向父组件传值(this.$emit()方法)「建议收藏」
- vue子组件怎么调用父组件的方法「建议收藏」
- 查询谷歌账号注册时间方法(2022)
- controller方法的返回值
- 技术组件优化分析:原理、方法与实战分享
- WordPress 4.3 产生大量定时作业修复方法
- Linux下增加用户新目录的方法(linux增加用户目录)
- Hibernate addScalar方法:返回标量和实体的结合体
- 条件查询掌握Oracle数据库多个IF条件查询的方法(oracle多个if)
- Linux下批量重命名文件的方法(批量重命名linux)
- 件的步骤与技巧Linux配置组件的步骤与技巧,帮你轻松掌握Linux系统的配置方法,提高管理效率,更好地应对工作挑战。(linux配置组)
- 深入探究Linux C消息队列的使用与实现方法(linuxc消息队列)
- Linux下CPU核数的调整方法(linuxcpu核数)
- 成系统的各个组件Linux查看系统组件的方法探究(linux如何查看组)
- MySQL实现两表连接删除的简便方法(mysql 两表连接删除)
- 分Oracle中实现数据区分的技术与方法(oracle中数据区)
- 三种禁用FileSystemObject组件的方法
- 深入Lumisoft.NET组件开发碰到乱码等问题的解决方法
- androidRadioButton和CheckBox组件的使用方法
- android检查手机和无线是否连接的方法