基于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 相关文章推荐
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 Javascript
jQuery实现穿梭框效果
Jan 19 jQuery
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开启gzip页面压缩实例
2013/06/09 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Python json转字典字符方法实例解析
2020/04/13 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
彪马日本官网:PUMA日本
2019/01/31 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
上班迟到检讨书
2014/01/10 职场文书
好听的队名和口号
2014/06/09 职场文书
导游词之日月潭
2019/11/05 职场文书