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:
|
<<: Solution to docker suddenly not being accessible from the external network
>>: HTML tag ID can be a variable
Recommend
Example code for element multiple tables to achieve synchronous scrolling
Element UI implements multiple tables scrolling a...
The final solution to Chrome's minimum font size limit of 12px
I believe that many users who make websites will ...
Tutorial on installing AutoFs mount service under Linux
Whether it is Samba service or NFS service, the m...
40 CSS/JS style and functional technical processing
1- Styling dropdown select boxes - Modify the dro...
CSS Transition expands and collapses elements by changing the Height
A common development need is that we want to coll...
Complete steps to configure a static IP address for a Linux virtual machine
Preface In many cases, we will use virtual machin...
Analysis of the difference between HTML relative path and absolute path
HTML beginners often encounter the problem of how ...
js to achieve simple calendar effect
This article shares the specific code of js to ac...
Detailed explanation of how Angular handles unexpected exception errors
Written in front No matter how well the code is w...
Analysis and solution of a MySQL slow log monitoring false alarm problem
Previously, for various reasons, some alarms were...
Website Design Experience Summary of Common Mistakes in Website Construction
Reminder: Whether it is planning, designing, or de...
Typical cases of MySQL index failure
Table of contents Typical Cases Appendix: Common ...
mysql5.7 installation and configuration tutorial under Centos7.3
This article shares the MySQL 5.7 installation an...
Detailed explanation of Vue's front-end system and front-end and back-end separation
Table of contents Overview Front-end knowledge sy...
Solution to the problem that Linux cannot connect to the Internet in VMware after the computer shuts down unexpectedly
Problem description: The Linux system's netwo...