通过前面两篇文章的的学习,我们掌握了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}} 暂无数据....
确认删除么?
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。