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
Lösung für das Problem, dass die virtuelle Virtualbox-Maschine im NAT-Modus keine Verbindung zum externen Netzwerk herstellen kann
Hintergrund Für die virtuelle VirtualBox-Maschine...
Concat() von kombinierten Feldern in MySQL
Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...
Docker erstellt Redis5.0 und mountet Daten
Inhaltsverzeichnis 1. Einfaches Einbinden persist...
So steuern Sie den Anteil untergeordneter Flex-Elemente auf der Hauptachse
Hintergrund Durch das flexible Layout wird eine e...
CSS zum Erzielen eines dynamischen Schaltflächeneffekts mit Partikeln
Ursprünglicher Link https://github.com/XboxYan/no...
Beispielcode zur Implementierung eines Hintergrundunschärfeeffekts mit CSS
Ist es der unten gezeigte Effekt? Wenn ja, lesen ...
Eine kurze Analyse der Konfigurationselemente des Angular CLI-Releasepfads
Vorwort Bei der Projektfreigabe ist immer eine Ve...
Allgemeine Datentypen in MySQL 5.7
——Anmerkungen aus „MySQL in einfachen Worten (zwe...
Mysql-Datenbankdesign - Analyse von drei Paradigmenbeispielen
Drei Paradigmen 1NF: Felder sind untrennbar; 2NF:...
Detaillierte Erläuterung des Zahlungsfunktionscodes des Vue-Projekts
1. Alipay-Methode: Alipay-Methode: Klicken Sie zu...
Webdesign-Tipps: Einfache Regeln für das Seitenlayout
Wiederholung: Wiederholen Sie bestimmte Seitendes...
Detaillierte Schritte zur Entwicklung von WeChat-Miniprogrammen mit Typescript
Auf die Vorteile von Typescript müssen wir nicht ...
MySQL-Passwort ist korrekt, aber keine lokale Anmeldung möglich -1045
MySQL-Passwort ist korrekt, aber keine lokale Anm...
Docker startet das Elasticsearch-Image und behebt den Fehler nach dem Mounten des Verzeichnisses
Ein ES-Image vom Docker-Hub heruntergeladen, Vers...
Erweiterte Verwendungsbeispiele für den Befehl mv in Linux
Vorwort Der Befehl mv ist die Abkürzung für move ...