How to realize the comment function of Vue
This article mainly shows you "Vue how to achieve comment function", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "Vue how to achieve comment function" this article.
The details are as follows
1. This is an example of my study. I have some inadequacies. I hope you can give me some advice. Thank you.
2. The effect picture of making comments
Click "publish" (click "Delete" after each comment to delete the entire comment ~)
3. Complete code display (my html structure is a bit messy. I would like to remind you that the div without a defined class can be deleted. I added div because it is convenient to write styles.)
Still want to remind, don't forget to introduce vue.js, the directory should be changed according to the location where you store it.
* {margin: 0Tracterpadding: 0; box-sizing: border-box;} # app {width: 700px; height: 650px; margin: auto; border: 1px solid # ccc;} # app H2 {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: 05px; margin: 5px 0;} # app > div > textarea {padding: 5px; margin-top: 5px;} .cont div {height: 50px; border: 1px solid # acacac; border-radius: 5px; padding: 010px;} .cont div span {padding: 05px; line-height: } .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;} h4 {font-weight: 400; color: # 333; margin-bottom: 10px;} Welcome to the complaint Hall username:
Complaint content:
Post a complaint and reply:
{{val.name}}
Say:
{{val.item}}
Delete
New Vue ({el: "# app", / / specify template data: {list: [{"name": "beibei", "item": "Mom, I want to eat baked sweet potatoes"}, {"name": "dian", "item": "eat, eat large pieces"}, uname: ", tarea:",} Methods: click event of the publish button sendCont () {/ / create a list var item = {name:this.uname,item:this.tarea} / / add item this.list.unshift (item) before list; / / user box, clear this.uname= "; this.tarea=";}, / / comment on the last "delete" event delCont (val) {alert ("confirm deletion?") / / find the element that val traverses in the list subscript / / 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 list Ind this.list.splice (ind,1) }) the above is all the contents of the article "how to publish comments in Vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
