Vue implementiert einfache Kommentarfunktion
|
In diesem Artikel wird der spezifische Code von Vue zur Implementierung einer einfachen Kommentarfunktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt 1. Dies ist ein Beispiel meiner Studie. Es gibt einige Mängel. Ich hoffe, Sie können mir einen Rat geben. Danke~ 2. Die Wirkung des Postens von Kommentaren
Die Wirkung nach dem Klicken auf „Veröffentlichen“ (Klicken Sie nach jedem Kommentar auf „Löschen“, um den gesamten Kommentar zu löschen~)
3. Vollständige Codeanzeige (meine HTML-Struktur ist chaotisch, hier möchte ich Sie daran erinnern, dass das Div ohne definierte Klasse gelöscht werden kann. Ich habe weitere Divs hinzugefügt, um das Schreiben von Stilen zu vereinfachen) Ich möchte Sie noch daran erinnern, vue.js nicht zu importieren und das Verzeichnis entsprechend Ihrem Speicherort zu ändern.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<script src="./vue.js"></script>
<style type="text/css">
*{
Rand: 0; Polsterung: 0;
Box-Größe: Rahmenbox;
}
#app{
Breite: 700px;
Höhe: 650px;
Rand: automatisch;
Rand: 1px durchgezogen #ccc;
}
#app h1{
Breite: 700px;
Schriftstärke: 400;
Zeilenhöhe: 100px;
Polsterung links: 20px;
Hintergrundfarbe: #cccccc;
Rand unten: 20px;
}
#app>div{
Polsterung: 0 20px;
}
#app>div>Eingabe{
Breite: 200px;
Höhe: 30px;
Polsterung: 0,5px;
Rand: 5px 0;
}
#app>div>Textbereich{
Polsterung: 5px;
Rand oben: 5px;
}
.cont div{
Höhe: 50px;
Rand: 1px durchgezogen #acacac;
Rahmenradius: 5px;
Polsterung: 0 10px;
}
.cont div span{
Polsterung: 0,5px;
Zeilenhöhe: 50px;
}
.forts.p{
Anzeige: Inline-Block;
}
.cont div p:n-ter-Typ(1){
Farbe: #550000;
}
.cont div p:n-ter-Typ(2){
Farbe: #595959;
}
.forts .del{
schweben: rechts;
Zeilenhöhe: 50px;
Farbe: #003366;
Cursor: Zeiger;
}
.forts .del:hover{
Farbe: #550000;
}
.schicken{
Breite: 80px;
Höhe: 30px;
Rand oben: 10px;
}
hr{
Rand: 1px durchgezogen #bababa;
Rand: 15px 0;
}
h3{
Schriftstärke: 400;
Farbe: #333;
Rand unten: 10px;
}
</Stil>
</Kopf>
<Text>
<div id="app">
<h1>Willkommen in der Tucao Hall</h1>
<div>
<label>Benutzername:</label><br>
<!-- .trim entfernt Leerzeichen im Inhalt -->
<!-- v-model bindet den (uname)-Wert des Formulars -->
<input type="text" placeholder="Benutzername" v-model.trim="uname" /><br>
<label>Kommentare:</label><br>
<textarea rows="2" cols="23" placeholder="Tucao-Inhalt" v-model.trim="tarea"></textarea><br>
<!-- @click="",Klick-Ereignis festlegen-->
<button class="send" @click="sendCont()">Veröffentlichen</button>
<hr>
<h3>Tucao antwortet:</h3>
<!-- Listendaten durchlaufen-->
<div Klasse="cont" v-for="Wert in Liste" :key="Wert.name">
<div>
<p>{{val.name}}</p><span>sagt:</span>
<p>{{val.item}}</p>
<p class="del" @click="delCont(val)">Löschen</p>
</div>
</div>
</div>
</div>
<Skripttyp="text/javascript">
neuer Vue({
el:"#app", //Vorlagendaten angeben:{
Liste:[
{"name":"beibei","item":"Mama, ich möchte gebackene Süßkartoffeln essen"},
{"name":"dian","item":"essen, große Stücke essen"},
],
Name:"",
Aufgabe:"",
},
Methoden:{
// Klickereignis für die Schaltfläche „Veröffentlichen“ sendCont(){
//Eine Liste erstellen var item = {name:this.uname,item:this.tarea};
// Element am Anfang der Liste hinzufügen
diese.Liste.unshift(Element);
// Benutzerbox, Inhaltsbox löschen this.uname="";
dies.tarea="";
},
// Kommentar zum letzten "delete"-Ereignis delCont(val){
alert("Möchten Sie wirklich löschen?");
// Index von val in Liste suchen // Das von value durchlaufene Element, wenn der Element-/Namenswert von value gleich dem Element-/Namenswert von val ist var ind = this.list.findIndex(value=>value.item===val.item);
// Lösche das ind-te Element in der Liste this.list.splice(ind,1);
}
}
})
</Skript>
</body>
</html>4. Das war’s. Ich wünsche Ihnen allen viel Spaß beim Lernen. Auf Wiedersehen. Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Lösung, wenn Docker plötzlich vom externen Netzwerk nicht mehr erreichbar ist
>>: Die HTML-Tag-ID kann eine Variable sein
Artikel empfehlen
Ausführliche Erklärung des Binlogs in MySQL 8.0
1 Einleitung Das Binärprotokoll zeichnet SQL-Anwe...
So entfernen Sie den gepunkteten Rahmen beim Klicken auf einen Link in FireFox
Ich bin heute auf mehrere Browserkompatibilitätsp...
Tutorial zur manuellen Installation von MySQL 8.0.13
In diesem Artikel finden Sie das Tutorial zur man...
Umfassende Interpretation der MySQL Master-Slave-Replikation, vom Prinzip bis zur Installation und Konfiguration
Warum brauchen wir Master-Slave-Replikation? 1. I...
So überprüfen Sie die Festplattennutzung unter Linux
1. Verwenden Sie den Befehl df, um die gesamte Fe...
Detaillierte Erläuterung der MySQL-Partitionsfunktion und Beispielanalyse
Zunächst: Was ist Datenbankpartitionierung? Ich h...
Layim in Javascript, um Freunde und Gruppen zu finden
Derzeit haben die Verantwortlichen von Layui die ...
Miniprogramm Benutzerdefinierte TabBar-Komponentenkapselung
In diesem Artikelbeispiel wird der spezifische Co...
Ausführliche Erläuterung der MySQL-Isolationsebene und des Sperrmechanismus
Inhaltsverzeichnis Kurzbeschreibung: 1. Vier Merk...
Schritte und Methoden zur Bindung von Domänennamen und IPs in der Alibaba Cloud
1 Rufen Sie die Alibaba Cloud-Konsole auf, suchen...
uniapp implementiert Datums- und Zeitauswahl
In diesem Artikelbeispiel wird der spezifische Co...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.17
In diesem Artikel wird die Installations- und Kon...
Zehn beliebte Regeln für das Interface-Design
<br />Dies ist ein Artikel, den ich vor lang...
Detaillierte Erklärung der Tomcat-Verzeichnisstruktur
Inhaltsverzeichnis Verzeichnisstruktur bin-Verzei...
IIS 7.5 verwendet das URL-Rewrite-Modul, um eine Webseitenumleitung zu erreichen
Wir alle wissen, dass Apache in der Konfiguration...