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
Detailed process of installing and deploying onlyoffice in docker
0. System requirements CPU I5-10400F or above Mem...
How to use iostat to view Linux hard disk IO performance
TOP Observation: The percentage of CPU time occup...
Basic use of javascript array includes and reduce
Table of contents Preface Array.prototype.include...
How to use Navicat to export and import mysql database
MySql is a data source we use frequently. It is v...
Summary of three ways to implement ranking in MySQL without using order by
Assuming business: View the salary information of...
Two ways to connect WeChat mini program to Tencent Maps
I've been writing a WeChat applet recently an...
About vue component switching, dynamic components, component caching
Table of contents 1. Component switching method M...
Detailed Analysis of Explain Execution Plan in MySQL
Preface How to write efficient SQL statements is ...
Several ways to update batches in MySQL
Typically, we use the following SQL statement to ...
A brief analysis of CSS :is() and :where() coming to browsers soon
Preview versions of Safari (Technology Preview 10...
Detailed explanation of how to solve the position:fixed fixed positioning offset problem
question CSS fixed positioning position:fixed is ...
mysql implements importing only a specified table from the sql file of exported data
Scenario Yesterday the system automatically backe...
Comprehensive understanding of html.css overflow
Comprehensive understanding of html.css overflow ...
Alignment issue between input text box and img verification code (img is always one head higher than input)
In web page production, input and img are often pl...
Why does MySQL paging become slower and slower when using limit?
Table of contents 1. Test experiment 2. Performan...