vue实现留言板todolist功能

vue实现留言板todolist功能

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

第一步、使用bootstrap做好布局

用户名:

年　龄:

删除

删除

删除全部

暂无数据....

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

用户名:

年　龄:

删除

删除

删除全部

暂无数据....

×

取消

确认

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

用户名:

年　龄:

删除

删除全部

暂无数据....

×

取消

确认

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

用户名:

年　龄:

删除

删除全部

暂无数据....

×

取消

确认

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

用户名:

年　龄:

删除

删除全部

暂无数据....

×

取消

确认

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

用户名:

年　龄:

删除

删除全部

暂无数据....

×

取消

确认

第七步、实现删除全部行

用户名:

年　龄:

v-on:click="curIndex=$index">删除

v-on:click="curIndex=$index">删除

删除全部

暂无数据....

×

取消

确认

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