基于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 this关键字的问题
Jan 09 Javascript
JS 继承实例分析
Nov 04 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 Javascript
创建与框架无关的JavaScript插件
Dec 01 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
PHP学习之PHP表达式
2006/10/09 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
Python入门之三角函数全解【收藏】
2017/11/08 Python
Python装饰器用法示例小结
2018/02/11 Python
学生信息管理系统python版
2018/10/17 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
员工晚婚的请假条
2014/02/08 职场文书
个人融资协议书
2014/10/02 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
Java 定时任务技术趋势简介
2022/05/04 Java/Android