vue实现留言板todolist功能

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

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

赞 (0)

相关推荐

  • 基于vuejs实现一个todolist项目

    基于vuejs实现一个todolist项目

    用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化: 完整代码: App.vue <template> <div id="app"> <h1 v-html = "title"></h1> <input v-model="newItem" v-on:keyup.enter="add

  • 利用vue写todolist单页应用

    网上有很多关于vue的todolist小程序.大多是利用vue-cli脚手架工具开发的,这个官网的文档也不支持新手从单文件开始学习.所以用大家熟悉的开发方式写了这个todolist,希望和大家一起学习. 1.vue是啥? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.简单说是一个模板引擎,做过后端的应该很清楚,以前靠服务器端渲染的dom,放在浏览器端端渲染,vue拿到数据渲染成dom.当然vue不仅仅是用来干这个的,数据驱动,数据双向绑定,赋予了用户很

  • Vue.js实现简单ToDoList 前期准备（一）

    一.前言 最近开始学习轻量级的mvvm框架Vue.js.就中文文档来说,算是很齐全了.之前本来在学习1.0版本,某日突然打开官网发现已更新为2.0.便把之后的都改为了2.0的语法.ps:如果恰好你是Vue的初学者的话,慕课网上有一个视频倒是可以去学习参考(我就是参考那个写了个ToDoList的小玩具,在这记录一下学习过程). 二.开篇 mvvm框架是前端现在比较热门的话题,去拉勾网上转一圈,基本70%都有要求.所以不说虚的,只是为了多挣点钱,咱们也该跟上时代的步伐不是.推荐一篇博文'http:/

  • 详解Vue的computed(计算属性)使用实例之TodoList

    详解Vue的computed(计算属性)使用实例之TodoList

    最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组件的方法,不同的是vue采用的与html绑定事件. 给个例子 /*html*/ <input type="button" value="点击" v-on:click='handlClick' id="app"> /*js*/ var ap

  • vue.js实例todoList项目

    新建组件todoList.vue,在App.vue中引入 import TodoList from "./components/todoList"; export default { name: 'app', components: { TodoList } } <template> <div id="app"> <h1>TO DO LIST !</h1> <todo-list></todo-list

  • vue实现todolist单页面应用

    vue实现todolist单页面应用

    刚学习vue的小伙伴不知道从哪入手,很多网上的教程一来就搭建脚手架环境,可以新手更本看不懂,建议还是用引入script的方式引入vue.js,然后看官网的教程,再拿那这个demo练练手,也可以看看官网的demo,然后再去熟悉安装,搭建单页面应用. 效果: 功能: 在input输入文字点击按钮或者enter,下面会添加一个带复选框和文字还有删除按钮的li 用到的vue函数: data,methods,watch,还有localstorage 页面非常简单: 先写外面的盒子,这里用到v-model双

  • vue实现ToDoList简单实例

    一.需求与准备 1.准备 使用bootstrap实现页面的基础样式(依赖jquery),使用vue实现功能需要 2.功能需求 1).表单实现输入任务清单后加入到展示项中 2).点击删除按钮弹出警告框询问是否删除(bootstarp模态框插件) 3).确定删除时,删除对应项(单项删除,全部删除) 4).任务列表为空时,显示"数据为空" v-show 二.实例 1.静态页面 demo使用bootstrap来快速搭建页面 1).表单组件: .form, form-group, form-co

  • vue2的todolist入门小项目的详细解析

    看完vue2的官方文档后,找个入门项目巩固下知识点,简单的todolsit是个不错的选择. 项目用到了vue.js vue.cli webpack ES6 node环境,完成项目后会对这些技术栈有了些了解. 准备开发环境 $ npm install -g vue-cli $ vue init ,比如 vue init webpack todolist $ cd todolist $ npm install $ npm run dev 安装谷歌插件vue.js devtools 下载vue.js的

  • vue实现留言板todolist功能

    通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet&quo

  • JS实现简易留言板增删功能

    本文实例为大家分享了JS实现留言板增删功能的具体代码,供大家参考,具体内容如下 ## **JS实现简易留言板的增删功能** 一个很简单的留言板,实现**增删**功能,因为没有数据库,所以只是一个静态的留言板功能. **修改**功能其实也可以添加,但是我现在技术不够,等以后可能会添加**修改**功能. 代码很简单,注释很清楚.``` <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu

  • 基于vue和bootstrap实现简单留言板功能

    本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下 作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦. 今天呢,是我学习vue的第二天,我想制作一个简易的留言板.功能很简单,就是数据的增删改查,下面开始步入正题: 大致布局如下: 1.html布局 如果大家不想自己去写css样式,使用bootstrap框架是一个很好地选择,它提供了一套响应式.移动设备优先的流式栅格系统. <div id="app&

  • javascript实现简单留言板案例

    javascript实现简单留言板案例

    用Javascript实现留言板案例(附带删除留言),供大家参考,具体内容如下 正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教 在一些网站的讨论品论区,我们通常可以看见会有留言板这个功能,然后当用户评论时,空评论不能评论,发布的评论将会最新显示,把旧的评论抵下去,然后博主可以对评论进行删除 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

  • Vue.js实现一个todo-list的上移下移删除功能

    Vue.js实现一个todo-list的上移下移删除功能

    如图,A simple todo-list长这样 这是一个基于vue.js的一个简单的todo-list小demo.首先要实现添加非空list,点击list切换finished状态这样的一个效果,推荐学习地址---->点击打开链接 接下来是实现的一个上移,下移,删除的效果图: 删除效果: 讲一下思路: 上移-----首先将鼠标所指list的内容插入到上一条上面,然后删除鼠标所指的list(也就是this.items[index]),运行代码便可实现上移的效果,或者将上下两条list的内容进行调换

  • PHP结合Mysql数据库实现留言板功能

    PHP结合Mysql数据库实现留言板功能

    先给大家展示下留言板效果图: 最近看了下PHP基础语法,就想利用这些基本东西实现留言板,也是对基础知识的一个巩固. 什么是留言板?一种可以用来记录,展示文字信息的载体. 现切入正题,说说本次留言板是怎么实现! 首先用户提交留言后,相关内容存入服务器,当他想看的时候后台再把所有留言读出来,最后显示在浏览器上,用户就可以看到留言了. 这其中后台需要便于读写数据的一个工具,我选择mysql数据库来帮助我完成这些事. 我写了主要是三个php文件,分别是: conn.php 连接数据库: addmsg.p

  • php实现留言板功能（代码详解）

    php实现留言板功能（代码详解）

    简单的PHP留言板制作 做基础的留言板功能  需要三张表: 员工表,留言表,好友表 首先造一个登入页面: <form action="drcl.php" method="post"> <div>帐号:<input type="text" name="zhang"/></div> <div>口令:<input type="text" name=

  • php实现留言板功能（会话控制）

    php实现留言板功能（会话控制）

    本文实例为大家分享了php留言板功能的具体代码,供大家参考,具体内容如下 数据库用到的三张表 一.登录界面 (denglu.php   login.php) 1.denglu.php <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>开发部内部留言板<

  • 简单实现PHP留言板功能

    简单实现PHP留言板功能

    本文实例为大家分享了PHP留言板功能的具体实现代码,供大家参考,具体内容如下 HTML代码 <div class="continer" > <div class="head" style="background-color:rgb(217,237,247);height:50px;vertical-align:middle"><h2 style="color: rgb(81,117,114)"&g

  • php+Memcached实现简单留言板功能示例

    php+Memcached实现简单留言板功能示例

    本文实例讲述了php+Memcached实现简单留言板功能.分享给大家供大家参考,具体如下: MyPdo.php <?php class MyPdo{ private $pdo; function __construct() { $this->pdo = $this->getPdo(); } /** * CreatePDO * * @return PDO */ public function getPdo() { $dbms='mysql'; $dbName='testdb'; $use

随机推荐