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
Zusammenfassung der schnellen Spaltenaddition bei MySQL 8.0 Online DDL
Inhaltsverzeichnis Problembeschreibung Historisch...
Detaillierte Erklärung der Docker-Nutzung unter CentOS8
1. Installation von Docker unter CentOS8 curl htt...
JavaScript-Makrotasks und Mikrotasks
Makrotasks und Mikrotasks JavaScript ist eine Sin...
Docker-Compose erstellt schnell Schritte für ein privates Docker-Warehouse
Erstellen Sie docker-compose.yml und füllen Sie d...
So lassen Sie DOSBox nach dem Start automatisch Befehle ausführen
Mit DOSBox können Sie DOS unter Windows simuliere...
Docker Link realisiert die Containerverbindung
Inhaltsverzeichnis 1.1. Netzwerkzugriff zwischen ...
UL-Listen-Tag-Design für Webseiten mit mehrspaltigem Layout
Als ich vor ein paar Tagen ein dreispaltiges Layou...
Das WeChat-Applet „Scroll-View“ implementiert eine Lösung zum doppelten Laden von Daten beim Hochziehen
In der Scroll-Ansicht des WeChat-Applets treten b...
Lösung für das Problem des Informationsverlusts mit "_" im Header bei Verwendung des Nginx-Proxys
Vorwort Bei der Entwicklung eines Gateway-Projekt...
Was sind die Attribute des JSscript-Tags
Was sind die Attribute des JS-Skript-Tags: charse...
gbk utf8 So verstehen und verwenden Sie die GBK- und UTF-8-Webseitencodierung richtig
Die Kodierung von Webseiten wird im Englischen als...
MySQL-Tutorial zum Bereitstellen mehrerer Instanzen auf einer einzigen Maschine mit mysqld_multi
Inhaltsverzeichnis 1. MySQL-Kompilierung und -Ins...
So legen Sie MySQL-Berechtigungen mit phpmyadmin fest
Inhaltsverzeichnis Schritt 1: Melden Sie sich als...
Das Problem der Einführung der angegebenen Schriftart @font-face in CSS, um mit verschiedenen Browsern kompatibel zu sein
Wenn Sie beim Erstellen einer Webseite eine besti...
Einführung in mögliche Probleme nach der Installation von Tomcat
1. Der Tomcat-Dienst ist nicht geöffnet Geben Sie...