本文实例为大家分享了vue实现简单留言板功能的具体代码，供大家参考，具体内容如下作为一个刚开始接触vue的前端小白，我想在这里记录一些学习过程，希望和大家一起进步，如有不妥处之处，请多多指教呦。今天呢，是我学习vue的第二天，我想制作一个简易的留言板。功能很简单，就是数据的增删改查，下面开始步入正题：
大致布局如下：1.html布局1.html布局如果大家不想自己去写css样式，使用bootstrap框架是一个很好地选择，它提供了一套响应式、移动设备优先的流式栅格系统。

2.数据如下：由于没有连接数据库，所以采用了模拟数据2.数据如下：
data:{
title:'留言板',
nikename:'',
content:'',
date:'',
query:'',//查询的内容
changeContent:'',//修改后的数据
bl:true,
list:[
{id:1,nikename:"笑话",content:'今天天气真好',date:'2021-02-27-18:06'},
{id:2,nikename:"小草",content:'是呀，那咱们出去晒太阳吧',date:'2021-02-26-18:06'}
]
},
data:{
title:'留言板',
nikename:'',
content:'',
date:'',
query:'',//查询的内容
changeContent:'',//修改后的数据
bl:true,
list:[
{id:1,nikename:"笑话",content:'今天天气真好',date:'2021-02-27-18:06'},
{id:2,nikename:"小草",content:'是呀，那咱们出去晒太阳吧',date:'2021-02-26-18:06'}
]
},3.增加（发表）功能：3.增加（发表）功能：
add() {
this.list.push({

id: this.list.length + 1,

nikename: this.nikename,

content: this.content,
date:this.getdate()
})
this.nikename='';
this.content='';
},
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.删除功能：4.删除功能：
del(index,id){
this.list.splice(index,1)
}
clear(){
this.list = [];//不可直接将数组长度设为零,这是非响应式的操作
},
del(index,id){
this.list.splice(index,1)
}
clear(){
this.list = [];//不可直接将数组长度设为零,这是非响应式的操作
},删除按钮绑定del,点击时删除一条评论，清屏按钮绑定clear，点击时删除所有评论。5.修改功能：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='';
},
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.查询功能：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;
},
},
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个精彩的专题：这里Bootstrap学习教程Bootstrap学习教程Bootstrap实战教程Bootstrap实战教程Bootstrap插件使用教程Bootstrap插件使用教程关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。vue.js组件学习教程vue学习教程请阅读专题《vue实战教程》《vue实战教程》以上就是关于本文的全部内容，希望对大家的学习有所帮助。