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

{{title}}：

• {{item.nikename}}：

  {{item.content}}

  {{item.date}}

  删除

  修改

搜索

昵称

内容

发表

清屏

修改：

确认修改

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;

},

},

猜您喜欢

最近遇到一个棘手的问题，需要查找含有某个关键字的网页，但是通过chrome原生的历史记录查出来的，查到的结果并不满意，今天小编就给大家分享一篇教程帮助大家解决Chrome历史记录的问题，感兴趣的朋友一起看看吧..

数据的校验是交互式网站一个不可或缺的功能，数据验证分为客户端验证和服务器端验证，本文着重讲解了springMVC怎样对输入数据校验,欢迎大家阅读和收藏..

网友评论

Copyright 2020 www.SoftYun.net 【软件云】 版权所有

声明：所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式