首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue实现留言板todolist功能

Posted in Javascript onAugust 16, 2017

通过前面两篇文章的的学习，我们掌握了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>

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

vue实现留言板todolist功能

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）
Aug 16 #Javascript
vue的事件绑定与方法详解
Aug 16 #Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 #Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 #Javascript
在一般处理程序（ashx）中弹出js提示语
Aug 16 #Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 #jQuery
详谈表单重复提交的三种情况及解决方法
Aug 16 #Javascript
游标(1) 批处理(1) 排序失效(1) 重复数据(2) timestamp(1) 临时表(1) T-SQL(1) 表变量(1) ip连接(1) GTID(1)
You might like
咖啡界又出新概念，无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
利用PHP将部分内容用星号替换
2020/04/21 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
js实现简易的单数字随机抽奖（0-9）
2020/03/19 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
Vue组件开发初探
2017/02/14 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
小程序实现密码输入框
2020/11/16 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
Flask Web开发入门之文件上传（八）
2018/08/17 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
怀俄明州飞钓：Platte River Fly Shop
2017/12/28 全球购物
WatchShop法国：英国排名第一的独立手表零售商
2020/02/17 全球购物
网络工程师的自我评价
2013/10/02 职场文书
应届生英语教师求职信
2013/11/05 职场文书
项目安全员岗位职责
2015/02/15 职场文书
小学班主任个人总结
2015/03/03 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
同学联谊会邀请函
2019/06/24 职场文书
修改并编译golang源码的操作步骤
2021/07/25 Golang