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
Detailliertes Beispiel für MySQL-Joint-Tabellen-Update-Daten
1.MySQL UPDATE JOIN-Syntax In MySQL können Sie di...
Die detaillierteste Installation und Konfiguration von Redis in Docker (mit Bildern und Text)
1. Finden Sie eine geeignete Version von Redis fü...
Warum sollte CSS im Head-Tag platziert werden?
Denken Sie darüber nach: Warum sollte css im head...
Lassen Sie uns über die Größen- und Längenbeschränkungen verschiedener Objekte in MySQL sprechen
Inhaltsverzeichnis Beschränkung der Bezeichnerlän...
Koexistenz von Python2 und Python3 unter einem CentOS7-System
Der erste Schritt besteht darin, die Versionsnumm...
Einführung in die Verwendung des http-equiv-Attributs im Meta-Tag
Meta ist ein Hilfstag im Kopfbereich der HTML-Spra...
Grundlegende Konzepte und allgemeine Methoden des Map-Mappings in ECMAScript6
Inhaltsverzeichnis Was ist eine Zuordnung? Unters...
Der beliebige Upload von Jar-Paketen in Apache Flink führt zu einem Wiederholungsproblem bei der Sicherheitsanfälligkeit bezüglich Remotecodeausführung (Sicherheitswarnung)
Beschreibung der Sicherheitslücke Apache Flink is...
Ausführliche Erläuterung der MySQL-Lern-Engine, Erläuterungen und Berechtigungen
Motor Einführung Innodb-Engine Die Innodb-Engine ...
Die Verwendung und der Unterschied zwischen vue3 watch und watchEffect
1. Hörer ansehen Vorstellung der Uhr importiere {...
Detailliertes Tutorial zur Installation von MySQL 5.7 auf RedHat 6.5
RedHat6.5 Installation MySQL5.7 Tutorial teilen, ...
Mysql SQL-Anweisungsvorgang zum Hinzufügen oder Ändern des Primärschlüssels
Tabellenfelder hinzufügen alter table table1 add ...
Ein super detailliertes Vue-Router Schritt-für-Schritt-Tutorial
Inhaltsverzeichnis 1. Router-Ansicht 2. Router-Ve...
Eine kurze Analyse der MySQL PHP-Syntax
Schauen wir uns zunächst die grundlegende Syntax ...
JS erzielt Fünf-Sterne-Lobeffekt
Verwenden Sie JS, um objektorientierte Methoden z...