基于vue和bootstrap實(shí)現(xiàn)簡單留言板功能

更新時間：2020年05月30日 12:00:37 作者：歡大喜。

這篇文章主要為大家詳細(xì)介紹了基于vue和bootstrap實(shí)現(xiàn)簡單留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)簡單留言板功能的具體代碼，供大家參考，具體內(nèi)容如下

作為一個剛開始接觸vue的前端小白，我想在這里記錄一些學(xué)習(xí)過程，希望和大家一起進(jìn)步，如有不妥處之處，請多多指教呦。

今天呢，是我學(xué)習(xí)vue的第二天，我想制作一個簡易的留言板。功能很簡單，就是數(shù)據(jù)的增刪改查，下面開始步入正題：
大致布局如下：

1.html布局

如果大家不想自己去寫css樣式，使用bootstrap框架是一個很好地選擇，它提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)。

<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">內(nèi)容</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" >發(fā)表</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">確認(rèn)修改</button>
 </form> 
</div>

2.數(shù)據(jù)如下：由于沒有連接數(shù)據(jù)庫，所以采用了模擬數(shù)據(jù)

data:{
 title:'留言板',
 nikename:'',
 content:'',
 date:'',
 query:'',//查詢的內(nèi)容
 changeContent:'',//修改后的數(shù)據(jù)
 bl:true,
 list:[
 {id:1,nikename:"笑話",content:'今天天氣真好',date:'2020-02-27-18:06'},
 {id:2,nikename:"小草",content:'是呀，那咱們出去曬太陽吧',date:'2020-02-26-18:06'}
 ]
 },

3.增加（發(fā)表）功能：

add() {
 this.list.push({
  id: this.list.length + 1,
  nikename: this.nikename,
  content: this.content,
 date:this.getdate()
 })
 this.nikename='';
 this.content='';
 },

用戶輸入的昵稱和內(nèi)容都采用了雙向綁定，時間是獲取的當(dāng)下時間，發(fā)表按鈕使用@click指令綁定了add函數(shù)。發(fā)表完后將昵稱和內(nèi)容框清空。

4.刪除功能：

del(index,id){
 this.list.splice(index,1)
 }
clear(){
 this.list = [];//不可直接將數(shù)組長度設(shè)為零,這是非響應(yīng)式的操作
 },

刪除按鈕綁定del,點(diǎn)擊時刪除一條評論，清屏按鈕綁定clear，點(diǎn)擊時刪除所有評論。

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

點(diǎn)擊修改，改變vm.bl的值，并記錄當(dāng)前評論的昵稱，修改框使用了v-show指令，當(dāng)vm.bl值為false時顯示。點(diǎn)擊確認(rèn)修改，根據(jù)當(dāng)前昵稱尋找到要修改的評論，修改它的內(nèi)容和發(fā)表時間。

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

查詢功能依賴的是查詢框輸入的內(nèi)容，因而使用了計(jì)算屬性。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

關(guān)于vue.js組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

更多vue學(xué)習(xí)教程請閱讀專題《vue實(shí)戰(zhàn)教程》

以上就是關(guān)于本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: