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

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

主要为大家详细介绍了基于vue和bootstrap实现简单留言板功能，文中示例代码介绍的非常详细，具有一定的参考价

值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现简单留言板功能的具体代码，供大家参考，具体内容如下

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

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

大致布局如下：

1.html布局布局

<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="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>

<div class="col-sm-11">

<textarea class="form-control" rows="3" v-model="changeContent"></textarea>