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

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

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

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时显示。点击确认修改，根据当前昵称寻找到要修改的评论，修改它的内容和发表时间。
5.查询功能：

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;
	},
},

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