vue实现留言板todolist功能
(编辑：jimmy 日期: 2024/11/20 浏览：3 次 )
通过前面两篇文章的的学习，我们掌握了vue的基本用法. 本文，就利用这些基础知识来实现一个留言板， 老外把他称之为todolist.
第一步、使用bootstrap做好布局
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="lib/bootstrap.min.css"/> <script src="/UploadFiles/2021-04-02/jquery-1.7.2.js">第二步、增加模态框，模态框默认为隐藏的
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="lib/bootstrap.min.css"/> <script src="/UploadFiles/2021-04-02/jquery-1.7.2.js">第三步、定义userList用来保存用户，userName保存用户名, age保存用户变量， 然后把userName和age 通过 v-model指令绑定到对应的输入框，实现输入框与变量中的数据双向驱动，在表格的行中输出userList
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="lib/bootstrap.min.css"/> <script src="/UploadFiles/2021-04-02/jquery-1.7.2.js">第四步、添加用户，点击添加按钮，把输入框中的数据作为一个对象 push 到数组userList，添加完之后，把userName, age清空，那么两个输入框的内容就会被清空
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="lib/bootstrap.min.css"/> <script src="/UploadFiles/2021-04-02/jquery-1.7.2.js">第五步、结合数组的长度与v-show指令，实现提示信息的显示与隐藏
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="lib/bootstrap.min.css"/> <script src="/UploadFiles/2021-04-02/jquery-1.7.2.js">第六步、实现删除某行数据
上一篇：JavaScript-定时器0~9抽奖系统详解（代码）<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="lib/bootstrap.min.css"/> <script src="/UploadFiles/2021-04-02/jquery-1.7.2.js">第七步、实现删除全部行
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="lib/bootstrap.min.css"/> <script src="/UploadFiles/2021-04-02/jquery-1.7.2.js">以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）