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


Posted in Javascript onMay 30, 2020

本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下

作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦。

今天呢,是我学习vue的第二天,我想制作一个简易的留言板。功能很简单,就是数据的增删改查,下面开始步入正题:
大致布局如下:

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

1.html布局

如果大家不想自己去写css样式,使用bootstrap框架是一个很好地选择,它提供了一套响应式、移动设备优先的流式栅格系统。

<div id="app" class="container" >
 <h3>{{title}}:</h3>
 <ul class="form-group" style="max-height: 300px;overflow: auto;">
 <li class="list-group-item row" v-for="(item,index) in search" :key="item.id">
  <span class='col-sm-1' >{{item.nikename}}:</span>
  <span class='col-sm-5'>{{item.content}}</span>
  <span class='col-sm-2'>{{item.date}}</span>
  <button class='col-sm-2 btn btn-danger' type="button" @click="del(index,item.id)">删除</button>
  <button class='col-sm-2 btn btn-info' type="button" @click="checkPre(index,item.id)">修改</button>
 </li>
 </ul>
 <br><br><br>
 <form class="form-horizontal" v-show="bl">
 <div class="form-group">
  <label for="search" class="col-sm-1 control-label">搜索</label>
  <div class="col-sm-11">
  <input type="text" class="form-control" id="search" placeholder="搜索留言" v-model="query" >
  </div>
 </div>
 <div class="form-group">
  <label for="nikename" class="col-sm-1 control-label">昵称</label>
  <div class="col-sm-11">
  <input type="text" class="form-control" id="nikename" placeholder="请输入昵称" v-model="nikename">
  </div>
  </div>
  <div class="form-group">
 <label for="content" class="col-sm-1 control-label">内容</label>
 <div class="col-sm-11">
  <textarea id="content" class="form-control" rows="3" v-model="content"></textarea>
 </div>
  </div>
  <button type="button" class="btn btn-success col-sm-1 col-sm-push-9" @click="add" >发表</button>
  <button type="button" class="btn btn-danger col-sm-1 col-sm-push-10" @click="clear" >清屏</button>
 </form> 
 <form class="form-horizontal" v-show="!bl">
  <div class="form-group">
 <label class="col-sm-1 control-label">修改:</label>
 <div class="col-sm-11">
  <textarea class="form-control" rows="3" v-model="changeContent"></textarea>
 </div>
  </div>
  <button type="button" class="btn btn-success col-sm-1 col-sm-push-11" @click="confirm">确认修改</button>
 </form> 
</div>

2.数据如下:由于没有连接数据库,所以采用了模拟数据

data:{
 title:'留言板',
 nikename:'',
 content:'',
 date:'',
 query:'',//查询的内容
 changeContent:'',//修改后的数据
 bl:true,
 list:[
 {id:1,nikename:"笑话",content:'今天天气真好',date:'2020-02-27-18:06'},
 {id:2,nikename:"小草",content:'是呀,那咱们出去晒太阳吧',date:'2020-02-26-18:06'}
 ]
 },

3.增加(发表)功能:

add() {
 this.list.push({
  id: this.list.length + 1,
  nikename: this.nikename,
  content: this.content,
 date:this.getdate()
 })
 this.nikename='';
 this.content='';
 },

用户输入的昵称和内容都采用了双向绑定,时间是获取的当下时间,发表按钮使用@click指令绑定了add函数。发表完后将昵称和内容框清空。

4.删除功能:

del(index,id){
 this.list.splice(index,1)
 }
clear(){
 this.list = [];//不可直接将数组长度设为零,这是非响应式的操作
 },

删除按钮绑定del,点击时删除一条评论,清屏按钮绑定clear,点击时删除所有评论。

5.修改功能:

checkPre(index,id){
 this.bl = !this.bl;
 this.nikename = this.list[index].nikename;
},
confirm(){
 this.list.forEach(function(item,index){
 if(item.nikename == vm.nikename){
 item.content = vm.changeContent;
 item.date = vm.getdate();
 }
 })
 this.bl = !this.bl;
 vm.nikename='';
},

点击修改,改变vm.bl的值,并记录当前评论的昵称,修改框使用了v-show指令,当vm.bl值为false时显示。点击确认修改,根据当前昵称寻找到要修改的评论,修改它的内容和发表时间。

6.查询功能:

computed:{
 search(){
 let result = [];
 this.list.forEach((item,index)=>{
 if(item.nikename.includes(this.query) || item.content.includes(this.query)){
 result.push(item)
 }
 })
 return result;
 },
},

查询功能依赖的是查询框输入的内容,因而使用了计算属性。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是关于本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
JS常见内存泄漏及解决方案解析
May 30 #Javascript
react结合bootstrap实现评论功能
May 30 #Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 #jQuery
JavaScript类的继承多种实现方法
May 30 #Javascript
Vue实现购物车实例代码两则
May 30 #Javascript
vue实现购物车案例
May 30 #Javascript
vue.js实现简单购物车功能
May 30 #Javascript
You might like
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
Node.js返回JSONP详解
2016/05/18 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
Python中字符编码简介、方法及使用建议
2015/01/08 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
python模拟斗地主发牌
2020/04/22 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
运动会解说词200字
2014/02/06 职场文书
食品采购员岗位职责
2014/04/14 职场文书
敬老院活动总结
2014/04/28 职场文书
企业安全生产标语
2014/06/06 职场文书
单位消防安全责任书
2014/07/23 职场文书
公司地址变更通知
2015/04/25 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers