好资源导航 » 文章资讯 » vue实现留言板todolist功能

vue实现留言板todolist功能

2023-09-26 10:08:08 54

通过前面两篇文章的的学习，我们掌握了vue的基本用法.本文，就利用这些基础知识来实现一个留言板，老外把他称之为todolist.

第一步、使用bootstrap做好布局














用户名:

年龄:

用户信息表

序号名字年龄操作 1 张三 20 删除 2 李四 22 删除

删除全部

暂无数据....

第二步、增加模态框，模态框默认为隐藏的














用户名:

年龄:

用户信息表

序号名字年龄操作 1 张三 20 删除 2 李四 22 删除

删除全部

暂无数据....

确认删除么?

取消确认

第三步、定义userList用来保存用户，userName保存用户名,age保存用户变量，然后把userName和age通过v-model指令绑定到对应的输入框，实现输入框与变量中的数据双向驱动，在表格的行中输出userList
















用户名:



年龄:









用户信息表

序号
名字
年龄
操作


{{$index+1}}
{{value.name}}
{{value.age}}

删除




删除全部




暂无数据....










×

确认删除么?


取消
确认

第四步、添加用户，点击添加按钮，把输入框中的数据作为一个对象push到数组userList，添加完之后，把userName,age清空，那么两个输入框的内容就会被清空
















用户名:



年龄:









用户信息表

序号
名字
年龄
操作


{{$index+1}}
{{value.name}}
{{value.age}}

删除




删除全部




暂无数据....










×

确认删除么?


取消
确认

第五步、结合数组的长度与v-show指令，实现提示信息的显示与隐藏
















用户名:



年龄:









用户信息表

序号
名字
年龄
操作


{{$index+1}}
{{value.name}}
{{value.age}}

删除




删除全部




暂无数据....










×

确认删除么?


取消
确认

第六步、实现删除某行数据
















用户名:



年龄:









用户信息表

序号
名字
年龄
操作


{{$index+1}}
{{value.name}}
{{value.age}}

删除




删除全部




暂无数据....










×

确认删除么?


取消
确认

第七步、实现删除全部行
















用户名:



年龄:









用户信息表

序号
名字
年龄
操作


{{$index+1}}
{{value.name}}
{{value.age}}

删除






删除全部





暂无数据....










×

确认删除么?


取消
确认

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vue实现留言板todolist功能

热门推荐

随机推荐