vue3实现一个todo

vue3实现一个todo

目录功能介绍相关代码总结

实现方式不是最优,主要是为了学习vue3的一些新语法以及属性

功能介绍

相关代码

index.vue

工作计划

class="button"

type="primary"

icon="el-icon-circle-plus"

circle

@click="handleClickTodo"

>

class="button"

type="primary"

icon="el-icon-circle-plus"

circle

@click="handleClickTodo"

>

v-for="(val, index) in list"

:key="index"

:info="val"

>

v-for="(val, index) in list"

:key="index"

:info="val"

>

AddTodo.vue

title="新增待办计划"

v-model="visible"

width="600px"

@close="handleClose"

>

style="width: 430px"

:model="form"

:rules="rules"

label-width="120px"

ref="formRef"

>

v-model="form.title"

placeholder="请输入待办计划名称"

>

type="textarea"

:rows="6"

v-model="form.desc"

placeholder="请输入详细待办计划"

>

取 消

确 定

title="新增待办计划"

v-model="visible"

width="600px"

@close="handleClose"

>

style="width: 430px"

:model="form"

:rules="rules"

label-width="120px"

ref="formRef"

>

v-model="form.title"

placeholder="请输入待办计划名称"

>

type="textarea"

:rows="6"

v-model="form.desc"

placeholder="请输入详细待办计划"

>

style="width: 430px"

:model="form"

:rules="rules"

label-width="120px"

ref="formRef"

>

v-model="form.title"

placeholder="请输入待办计划名称"

>

v-model="form.title"

placeholder="请输入待办计划名称"

>

type="textarea"

:rows="6"

v-model="form.desc"

placeholder="请输入详细待办计划"

>

type="textarea"

:rows="6"

v-model="form.desc"

placeholder="请输入详细待办计划"

>

取 消

确 定

Item.vue

{{ info.time }}

type="danger"

icon="el-icon-delete"

circle

size="mini"

@click="handleDelTodo"

>

type="danger"

icon="el-icon-delete"

circle

size="mini"

@click="handleDelTodo"

>

总结

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注我们的更多内容！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。