Vue實現簡單的發表評論功能

本文實例為大傢分享瞭Vue實現簡單的發表評論功能的具體代碼,供大傢參考,具體內容如下

1、這是我在學習中的實例,有些的不足的地方,還望各位大佬指點,感謝哦~

2、發表評論的效果圖

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

3、完整代碼展示(我html結構寫的比較亂,這裡提醒大傢一下,沒有定義類的div是可以刪掉的,我是因為方便寫樣式所以多加瞭div)

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

<!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去除內容中的空格 -->
    <!-- v-model綁定表單的(uname)值 -->
    <input type="text" placeholder="用戶名" v-model.trim="uname" /><br>
    <label>吐槽內容:</label><br>
    <textarea rows="2" cols="23" placeholder="吐槽內容" v-model.trim="tarea"></textarea><br>
    <!-- @click="",設置點擊事件 -->
    <button class="send" @click="sendCont()">發表</button>
    <hr>
    <h3>吐槽回復:</h3>
    <!-- 遍歷list數據 -->
    <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:{
     // "發表"按鈕的點擊事件
     sendCont(){
      // 創建一項清單
      var item = {name:this.uname,item:this.tarea};
      // 在list的前面添加item
      this.list.unshift(item);
      // 用戶框,內容框清空
      this.uname="";
      this.tarea="";
     },
     // 評論最後的"刪除"事件
     delCont(val){
      alert("確定刪除?");
      // 查找val在list下標
      // value遍歷的元素 當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、到底啦,祝大傢能夠學的愉快,再見

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: