基于vue和bootstrap实现简单留⾔板功能
本⽂实例为⼤家分享了vue实现简单留⾔板功能的具体代码，供⼤家参考，具体内容如下
作为⼀个刚开始接触vue的前端⼩⽩，我想在这⾥记录⼀些学习过程，希望和⼤家⼀起进步，如有不妥处之处，请多多指教呦。
今天呢，是我学习vue的第⼆天，我想制作⼀个简易的留⾔板。功能很简单，就是数据的增删改查，下⾯开始步⼊正题：
⼤致布局如下：
1.html布局
如果⼤家不想⾃⼰去写css样式，使⽤bootstrap框架是⼀个很好地选择，它提供了⼀套响应式、移动设备优先的流式栅格系统。<div id="app" class="container" >
<h3>{{title}}：</h3>
<ul class="form-group" >
<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'>{{t}}</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: t,
date()
})
this.nikename='';
},
⽤户输⼊的昵称和内容都采⽤了双向绑定，时间是获取的当下时间，发表按钮使⽤@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.date = vm.getdate();
}
})
this.bl = !this.bl;
vm.nikename='';
},
点击修改，改变vm.bl的值，并记录当前评论的昵称，修改框使⽤了v-show指令，当vm.bl值为false时显⽰。点击确认修改，根据当前昵称寻到要修改的评论，修改它的内容和发表时间。
6.查询功能：
computed:{
search(){
let result = [];bootstrap 5
this.list.forEach((item,index)=>{
if(item.nikename.includes(this.query) || t.includes(this.query)){
result.push(item)
}
})
return result;
},
},
查询功能依赖的是查询框输⼊的内容，因⽽使⽤了计算属性。
如果⼤家还想深⼊学习，可以点击进⾏学习，再为⼤家附3个精彩的专题：关于vue.js组件的教程，请⼤家点击专题进⾏学习。
更多vue学习教程请阅读专题
以上就是关于本⽂的全部内容，希望对⼤家的学习有所帮助。