Vue實現(xiàn)簡單的發(fā)表評論功能

更新時間：2021年10月29日 11:36:33 作者：一個小點點.

這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單的發(fā)表評論功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現(xiàn)簡單的發(fā)表評論功能的具體代碼，供大家參考，具體內(nèi)容如下

1、這是我在學(xué)習(xí)中的實例，有些的不足的地方，還望各位大佬指點，感謝哦~

2、發(fā)表評論的效果圖

點擊“發(fā)表”之后的效果（每條評論之后點擊“刪除”可以刪掉這一整條評論~）

3、完整代碼展示（我html結(jié)構(gòu)寫的比較亂，這里提醒大家一下，沒有定義類的div是可以刪掉的，我是因為方便寫樣式所以多加了div）

還是要提醒一下，不要忘記引入vue.js，目錄記得根據(jù)自己存放的位置改

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./vue.js"></script>
  <style type="text/css">
   *{
    margin: 0;padding: 0;
    box-sizing: border-box;
   }
   #app{
    width: 700px;
    height: 650px;
    margin: auto;
    border: 1px solid #ccc;
   }
   #app h1{
    width: 700px;
    font-weight: 400;
    line-height: 100px;
    padding-left: 20px;
    background-color: #cccccc;
    margin-bottom: 20px;
   }
   #app>div{
    padding: 0 20px;
   }
   #app>div>input{
    width: 200px;
    height: 30px;
    padding: 0 5px;
    margin: 5px 0;
   }
   #app>div>textarea{
    padding: 5px;
    margin-top: 5px;
   }
   .cont div{
    height: 50px;
    border: 1px solid #acacac;
    border-radius: 5px;
    padding: 0 10px;
   }
   .cont div span{
    padding: 0 5px;
    line-height: 50px;
   }
   .cont p{
    display: inline-block;
   }
   .cont div p:nth-of-type(1){
    color: #550000;
   }
   .cont div p:nth-of-type(2){
    color: #595959;
   }
   .cont .del{
    float: right;
    line-height: 50px;
    color: #003366;
    cursor: pointer;
   }
   .cont .del:hover{
    color: #550000;
   }
   .send{
    width: 80px;
    height: 30px;
    margin-top: 10px;
   }
   hr{
    border: 1px solid #bababa;
    margin: 15px 0;
   }
   h3{
    font-weight: 400;
    color: #333;
    margin-bottom: 10px;
   }
  </style>
 </head>
 <body>
  <div id="app">
   <h1>歡迎來到吐槽大廳</h1>
   <div>
    <label>用戶名：</label><br>
    <!-- .trim去除內(nèi)容中的空格 -->
    <!-- v-model綁定表單的(uname)值 -->
    <input type="text" placeholder="用戶名" v-model.trim="uname" /><br>
    <label>吐槽內(nèi)容：</label><br>
    <textarea rows="2" cols="23" placeholder="吐槽內(nèi)容" v-model.trim="tarea"></textarea><br>
    <!-- @click="",設(shè)置點擊事件 -->
    <button class="send" @click="sendCont()">發(fā)表</button>
    <hr>
    <h3>吐槽回復(fù)：</h3>
    <!-- 遍歷list數(shù)據(jù) -->
    <div class="cont" v-for="val in list" :key="val.name">
     <div>
      <p>{{val.name}}</p><span>說:</span>
      <p>{{val.item}}</p>
      <p class="del" @click="delCont(val)">刪除</p>
     </div>
    </div>
   </div>
  </div>
  <script type="text/javascript">
   new Vue({
    el:"#app",//指定模板
    data:{
     list:[
      {"name":"beibei","item":"媽媽,我想吃烤紅薯"},
      {"name":"dian","item":"吃,吃大塊的"},
     ],
     uname:"",
     tarea:"",
    },
    methods:{
     // "發(fā)表"按鈕的點擊事件
     sendCont(){
      // 創(chuàng)建一項清單
      var item = {name:this.uname,item:this.tarea};
      // 在list的前面添加item
      this.list.unshift(item);
      // 用戶框，內(nèi)容框清空
      this.uname="";
      this.tarea="";
     },
     // 評論最后的"刪除"事件
     delCont(val){
      alert("確定刪除？");
      // 查找val在list下標(biāo)
      // value遍歷的元素 當(dāng)value的item/name值等于val的item/name值
      var ind = this.list.findIndex(value=>value.item===val.item);
      // 刪除list第ind個
      this.list.splice(ind,1);
     }
    }
   })
  </script>
 </body>
</html>

4、到底啦，祝大家能夠?qū)W的愉快，再見

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: