基于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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
php连接mysql数据库
2017/03/21 PHP
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python组合无重复三位数的实例
2018/11/13 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
python ftplib模块使用代码实例
2019/12/31 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
python scatter函数用法实例详解
2020/02/11 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
大学新生军训个人的自我评价
2013/10/03 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
优秀广告词大全
2014/03/19 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书