Vue implements simple comment function

This article shares the specific code of Vue to implement a simple comment function for your reference. The specific content is as follows

1. This is an example of my study. There are some deficiencies. I hope you can give me some advice. Thank you~

2. The effect of posting comments

The effect after clicking "Publish" (Click "Delete" after each comment to delete the entire comment~)

3. Complete code display (my HTML structure is messy, here I would like to remind you that the div without a defined class can be deleted. I added more divs for the convenience of writing styles)

I still want to remind you, don't forget to import vue.js, and remember to change the directory according to your storage location

<!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>Welcome to the Tucao Hall</h1>
   <div>
    <label>Username:</label><br>
    <!-- .trim removes spaces in the content -->
    <!-- v-model binds the form's (uname) value -->
    <input type="text" placeholder="Username" v-model.trim="uname" /><br>
    <label>Comments:</label><br>
    <textarea rows="2" cols="23" placeholder="Tucao content" v-model.trim="tarea"></textarea><br>
    <!-- @click="",Set click event-->
    <button class="send" @click="sendCont()">Publish</button>
    <hr>
    <h3>Tucao reply:</h3>
    <!-- Traverse list data-->
    <div class="cont" v-for="val in list" :key="val.name">
     <div>
      <p>{{val.name}}</p><span>says:</span>
      <p>{{val.item}}</p>
      <p class="del" @click="delCont(val)">Delete</p>
     </div>
    </div>
   </div>
  </div>
  <script type="text/javascript">
   new Vue({
    el:"#app", //Specify template data:{
     list:[
      {"name":"beibei","item":"Mom, I want to eat baked sweet potatoes"},
      {"name":"dian","item":"eat,eat big chunks"},
     ],
     uname:"",
     Tarea:"",
    },
    methods:{
     // "Publish" button click event sendCont(){
      // Create a list var item = {name:this.uname,item:this.tarea};
      // Add item to the front of the list
      this.list.unshift(item);
      // User box, content box clear this.uname="";
      this.tarea="";
     },
     // Comment on the last "delete" event delCont(val){
      alert("Are you sure you want to delete?");
      // Find the index of val in list // The element traversed by value when the item/name value of value is equal to the item/name value of val var ind = this.list.findIndex(value=>value.item===val.item);
      // Delete the indth item in list this.list.splice(ind,1);
     }
    }
   })
  </script>
 </body>
</html>

4. That’s it. I wish you all a happy study. Goodbye.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: