首页
所有分类
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 相关文章推荐
JavaScript的9个陷阱及评点分析
May 16 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
js验证上传图片的方法
May 12 Javascript
jQuery定义插件的方法
Dec 18 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
ES6基础之默认参数值
Feb 21 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
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
访问日志(2) 缓存(3) 线程(1) 连接数(1) 事务(5) PV(1) ipv6(1) 弱口令(1) 策略(1) 内存(1)
You might like
新手学习PHP的一些基础知识分享
2011/07/27 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
javascript学习笔记整理（概述、变量、数据类型简介）
2015/10/25 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
jQuery实现贪吃蛇小游戏（附源码下载）
2017/03/04 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传（下）
2017/04/21 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
详解webpack babel的配置
2018/01/09 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
浅谈express.js框架中间件（middleware）
2019/04/07 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
Python日期操作学习笔记
2008/10/07 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
学习Python爬虫的几点建议
2020/08/05 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
伊芙丽官方旗舰店：中国淑女一线品牌
2017/12/01 全球购物
Expedia瑞典官网：预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
教师读书活动总结
2014/05/07 职场文书
2019奶茶店创业计划书范本！
2019/07/15 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS