vue实现留言板todolist功能

2019-11-19 15:46:56

字体：大中小

来源：转载

供稿：网友

通过前面两篇文章的的学习，我们掌握了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="lib/jquery-1.7.2.js"></script>  <script src="lib/bootstrap.js"></script></head><body><div class="container">  <form role="form">    <div class="form-group">      <label for="username">用户名:</label>      <input type="text" id="username" class="form-control" placeholder="输入用户名">    </div>    <div class="form-group">      <label for="age">年　龄:</label>      <input type="text" id="age" class="form-control" placeholder="输入年龄">    </div>    <div class="form-group">      <input type="button" value="添加" class="btn btn-primary">      <input type="button" value="重置" class="btn btn-danger">    </div>  </form>  <hr>  <table class="table table-bordered table-hover">    <caption class="h2 text-info">用户信息表</caption>    <tr class="text-danger">      <th class="text-center">序号</th>      <th class="text-center">名字</th>      <th class="text-center">年龄</th>      <th class="text-center">操作</th>    </tr>    <tr class="text-center">      <td>1</td>      <td>张三</td>      <td>20</td>      <td>        <button class="btn btn-primary btn-sm">删除</button>      </td>    </tr>    <tr class="text-center">      <td>2</td>      <td>李四</td>      <td>22</td>      <td>        <button class="btn btn-primary btn-sm">删除</button>      </td>    </tr>    <tr>      <td colspan="4" class="text-right">        <button class="btn btn-danger btn-sm">删除全部</button>      </td>    </tr>    <tr>      <td colspan="4" class="text-center text-muted">        <p>暂无数据....</p>      </td>    </tr>  </table></div></body></html>

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

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <link rel="stylesheet" href="lib/bootstrap.min.css"/>  <script src="lib/jquery-1.7.2.js"></script>  <script src="lib/bootstrap.js"></script></head><body><div class="container">  <form role="form">    <div class="form-group">      <label for="username">用户名:</label>      <input type="text" id="username" class="form-control" placeholder="输入用户名">    </div>    <div class="form-group">      <label for="age">年　龄:</label>      <input type="text" id="age" class="form-control" placeholder="输入年龄">    </div>    <div class="form-group">      <input type="button" value="添加" class="btn btn-primary">      <input type="button" value="重置" class="btn btn-danger">    </div>  </form>  <hr>  <table class="table table-bordered table-hover">    <caption class="h2 text-info">用户信息表</caption>    <tr class="text-danger">      <th class="text-center">序号</th>      <th class="text-center">名字</th>      <th class="text-center">年龄</th>      <th class="text-center">操作</th>    </tr>    <tr class="text-center">      <td>1</td>      <td>张三</td>      <td>20</td>      <td>        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>      </td>    </tr>    <tr class="text-center">      <td>2</td>      <td>李四</td>      <td>22</td>      <td>        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>      </td>    </tr>    <tr>      <td colspan="4" class="text-right">        <button class="btn btn-danger btn-sm">删除全部</button>      </td>    </tr>    <tr>      <td colspan="4" class="text-center text-muted">        <p>暂无数据....</p>      </td>    </tr>  </table>  <!--模态框 弹出框-->  <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">    <div class="modal-dialog">      <div class="modal-content">        <div class="modal-header">          <button type="button" class="close" data-dismiss="modal">            <span>×</span>          </button>          <h4 class="modal-title">确认删除么?</h4>        </div>        <div class="modal-body text-right">          <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>          <button data-dismiss="modal" class="btn btn-danger btn-sm">确认</button>        </div>      </div>    </div>  </div></div></body></html>

第三步、定义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="lib/jquery-1.7.2.js"></script>  <script src="lib/bootstrap.js"></script>  <script src="../js/vue.js"></script>  <script>    window.onload = function () {      var c = new Vue({        el: '#box',        data: {          userList: [],          userName : '',          age : ''        }      });    }  </script></head><body><div class="container" id="box">  <form role="form">    <div class="form-group">      <label for="username">用户名:</label>      <input type="text" id="username" v-model="userName" class="form-control" placeholder="输入用户名">    </div>    <div class="form-group">      <label for="age">年　龄:</label>      <input type="text" id="age" v-model="age" class="form-control" placeholder="输入年龄">    </div>    <div class="form-group">      <input type="button" value="添加" class="btn btn-primary">      <input type="button" value="重置" class="btn btn-danger">    </div>  </form>  <hr>  <table class="table table-bordered table-hover">    <caption class="h2 text-info">用户信息表</caption>    <tr class="text-danger">      <th class="text-center">序号</th>      <th class="text-center">名字</th>      <th class="text-center">年龄</th>      <th class="text-center">操作</th>    </tr>    <tr class="text-center" v-for="value in userList">      <td>{{$index+1}}</td>      <td>{{value.name}}</td>      <td>{{value.age}}</td>      <td>        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>      </td>    </tr>    <tr>      <td colspan="4" class="text-right">        <button class="btn btn-danger btn-sm">删除全部</button>      </td>    </tr>    <tr>      <td colspan="4" class="text-center text-muted">        <p>暂无数据....</p>      </td>    </tr>  </table>  <!--模态框 弹出框-->  <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">    <div class="modal-dialog">      <div class="modal-content">        <div class="modal-header">          <button type="button" class="close" data-dismiss="modal">            <span>×</span>          </button>          <h4 class="modal-title">确认删除么?</h4>        </div>        <div class="modal-body text-right">          <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>          <button data-dismiss="modal" class="btn btn-danger btn-sm">确认</button>        </div>      </div>    </div>  </div></div></body></html>

第四步、添加用户，点击添加按钮，把输入框中的数据作为一个对象 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="lib/jquery-1.7.2.js"></script><script src="lib/bootstrap.js"></script><script src="../js/vue.js"></script><script>window.onload = function () {var c = new Vue({el: '#box',data: {userList: [],userName : '',age : ''}});}</script></head><body><div class="container" id="box"><form role="form"><div class="form-group"><label for="username">用户名:</label><input type="text" id="username" v-model="userName" class="form-control" placeholder="输入用户名"></div><div class="form-group"><label for="age">年　龄:</label><input type="text" id="age" v-model="age" class="form-control" placeholder="输入年龄"></div><div class="form-group"><input type="button" value="添加" class="btn btn-primary"><input type="button" value="重置" class="btn btn-danger"></div></form><hr><table class="table table-bordered table-hover"><caption class="h2 text-info">用户信息表</caption><tr class="text-danger"><th class="text-center">序号</th><th class="text-center">名字</th><th class="text-center">年龄</th><th class="text-center">操作</th></tr><tr class="text-center" v-for="value in userList"><td>{{$index+1}}</td><td>{{value.name}}</td><td>{{value.age}}</td><td><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button></td></tr><tr><td colspan="4" class="text-right"><button class="btn btn-danger btn-sm">删除全部</button></td></tr><tr><td colspan="4" class="text-center text-muted"><p>暂无数据....</p></td></tr></table><!--模态框 弹出框--><div role="dialog" class="modal fade bs-example-modal-sm" id="layer"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span>×</span></button><h4 class="modal-title">确认删除么?</h4></div><div class="modal-body text-right"><button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button><button data-dismiss="modal" class="btn btn-danger btn-sm">确认</button></div></div></div></div></div></body></html>

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

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <link rel="stylesheet" href="lib/bootstrap.min.css"/>  <script src="lib/jquery-1.7.2.js"></script>  <script src="lib/bootstrap.js"></script>  <script src="../js/vue.js"></script>  <script>    window.onload = function () {      var c = new Vue({        el: '#box',        data: {          userList: [],          userName : '',          age : ''        },        methods : {          addUser : function(){            this.userList.push({              name : this.userName,              age : this.age            });            this.userName = ''; //添加完用户之后，把输入框的值清除            this.age = '';          }        }      });    }  </script></head><body><div class="container" id="box">  <form role="form">    <div class="form-group">      <label for="username">用户名:</label>      <input type="text" id="username" v-model="userName" class="form-control" placeholder="输入用户名">    </div>    <div class="form-group">      <label for="age">年　龄:</label>      <input type="text" id="age" v-model="age" class="form-control" placeholder="输入年龄">    </div>    <div class="form-group">      <input type="button" v-on:click="addUser();" value="添加" class="btn btn-primary">      <input type="button" value="重置" class="btn btn-danger">    </div>  </form>  <hr>  <table class="table table-bordered table-hover">    <caption class="h2 text-info">用户信息表</caption>    <tr class="text-danger">      <th class="text-center">序号</th>      <th class="text-center">名字</th>      <th class="text-center">年龄</th>      <th class="text-center">操作</th>    </tr>    <tr class="text-center" v-for="value in userList">      <td>{{$index+1}}</td>      <td>{{value.name}}</td>      <td>{{value.age}}</td>      <td>        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>      </td>    </tr>    <tr v-show="userList.length!=0">      <td colspan="4" class="text-right">        <button class="btn btn-danger btn-sm">删除全部</button>      </td>    </tr>    <tr v-show="userList.length==0">      <td colspan="4" class="text-center text-muted">        <p>暂无数据....</p>      </td>    </tr>  </table>  <!--模态框 弹出框-->  <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">    <div class="modal-dialog">      <div class="modal-content">        <div class="modal-header">          <button type="button" class="close" data-dismiss="modal">            <span>×</span>          </button>          <h4 class="modal-title">确认删除么?</h4>        </div>        <div class="modal-body text-right">          <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>          <button data-dismiss="modal" class="btn btn-danger btn-sm">确认</button>        </div>      </div>    </div>  </div></div></body></html>

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

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <link rel="stylesheet" href="lib/bootstrap.min.css"/>  <script src="lib/jquery-1.7.2.js"></script>  <script src="lib/bootstrap.js"></script>  <script src="../js/vue.js"></script>  <script>    window.onload = function () {      var c = new Vue({        el: '#box',        data: {          userList: [],          userName : '',          age : '',          curIndex : -10        },        methods : {          addUser : function(){            this.userList.push({              name : this.userName,              age : this.age            });            this.userName = ''; //添加完用户之后，把输入框的值清除            this.age = '';          },          deleteRow : function( n ){            this.userList.splice( n, 1 );          }        }      });    }  </script></head><body><div class="container" id="box">  <form role="form">    <div class="form-group">      <label for="username">用户名:</label>      <input type="text" id="username" v-model="userName" class="form-control" placeholder="输入用户名">    </div>    <div class="form-group">      <label for="age">年　龄:</label>      <input type="text" id="age" v-model="age" class="form-control" placeholder="输入年龄">    </div>    <div class="form-group">      <input type="button" v-on:click="addUser();" value="添加" class="btn btn-primary">      <input type="button" value="重置" class="btn btn-danger">    </div>  </form>  <hr>  <table class="table table-bordered table-hover">    <caption class="h2 text-info">用户信息表</caption>    <tr class="text-danger">      <th class="text-center">序号</th>      <th class="text-center">名字</th>      <th class="text-center">年龄</th>      <th class="text-center">操作</th>    </tr>    <tr class="text-center" v-for="value in userList">      <td>{{$index+1}}</td>      <td>{{value.name}}</td>      <td>{{value.age}}</td>      <td>        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="curIndex=$index">删除</button>      </td>    </tr>    <tr v-show="userList.length!=0">      <td colspan="4" class="text-right">        <button class="btn btn-danger btn-sm">删除全部</button>      </td>    </tr>    <tr v-show="userList.length==0">      <td colspan="4" class="text-center text-muted">        <p>暂无数据....</p>      </td>    </tr>  </table>  <!--模态框 弹出框-->  <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">    <div class="modal-dialog">      <div class="modal-content">        <div class="modal-header">          <button type="button" class="close" data-dismiss="modal">            <span>×</span>          </button>          <h4 class="modal-title">确认删除么?</h4>        </div>        <div class="modal-body text-right">          <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>          <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteRow(curIndex);">确认</button>        </div>      </div>    </div>  </div></div></body></html>

第七步、实现删除全部行

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <link rel="stylesheet" href="lib/bootstrap.min.css"/>  <script src="lib/jquery-1.7.2.js"></script>  <script src="lib/bootstrap.js"></script>  <script src="../js/vue.js"></script>  <script>    window.onload = function () {      var c = new Vue({        el: '#box',        data: {          userList: [],          userName: '',          age: '',          curIndex: -10        },        methods: {          addUser: function () {            this.userList.push({              name: this.userName,              age: this.age            });            this.userName = ''; //添加完用户之后，把输入框的值清除            this.age = '';          },          deleteRow: function (n) {            if (n == -1) { //当n=-1的时候,清空数组，就是删除全部              this.userList = [];            } else {              this.userList.splice(n, 1);            }          }        }      });    }  </script></head><body><div class="container" id="box">  <form role="form">    <div class="form-group">      <label for="username">用户名:</label>      <input type="text" id="username" v-model="userName" class="form-control" placeholder="输入用户名">    </div>    <div class="form-group">      <label for="age">年　龄:</label>      <input type="text" id="age" v-model="age" class="form-control" placeholder="输入年龄">    </div>    <div class="form-group">      <input type="button" v-on:click="addUser();" value="添加" class="btn btn-primary">      <input type="button" value="重置" class="btn btn-danger">    </div>  </form>  <hr>  <table class="table table-bordered table-hover">    <caption class="h2 text-info">用户信息表</caption>    <tr class="text-danger">      <th class="text-center">序号</th>      <th class="text-center">名字</th>      <th class="text-center">年龄</th>      <th class="text-center">操作</th>    </tr>    <tr class="text-center" v-for="value in userList">      <td>{{$index+1}}</td>      <td>{{value.name}}</td>      <td>{{value.age}}</td>      <td>        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"            v-on:click="curIndex=$index">删除        </button>      </td>    </tr>    <tr v-show="userList.length!=0">      <td colspan="4" class="text-right">        <button class="btn btn-danger btn-sm" v-on:click="curIndex=-1" data-toggle="modal" data-target="#layer">          删除全部        </button>      </td>    </tr>    <tr v-show="userList.length==0">      <td colspan="4" class="text-center text-muted">        <p>暂无数据....</p>      </td>    </tr>  </table>  <!--模态框 弹出框-->  <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">    <div class="modal-dialog">      <div class="modal-content">        <div class="modal-header">          <button type="button" class="close" data-dismiss="modal">            <span>×</span>          </button>          <h4 class="modal-title">确认删除么?</h4>        </div>        <div class="modal-body text-right">          <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>          <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteRow(curIndex);">确认          </button>        </div>      </div>    </div>  </div></div></body></html>

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

上一篇：JavaScript-定时器0~9抽奖系统详解（代码）

下一篇：Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）