Detaillierte Erläuterung der Vue Simple Notepad-Entwicklung
|
In diesem Artikelbeispiel wird der spezifische Code von Vue zur Implementierung von Easy Notepad zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt CSS Code
#todoapp {
Rand: 0 400 px;
Breite: 600px;
Hintergrundfarbe: grau;
Textausrichtung: zentriert;
}
.Inhalt {
Rand: 0px 100px;
}
.todo {
Rand: 10px;
Textausrichtung: links;
Hintergrundfarbe: grün;
}
.btn {
schweben: rechts;
Hintergrundfarbe: Rasengrün;
}
.klar{
Hintergrundfarbe: Hellseegrün;
}
.Liste{
Rand links: 10px;
}HTML-Code plus JS-Code
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<link rel="stylesheet" href="./css/index.css" >
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</Kopf>
<Text>
<div id="todoapp">
<div Klasse="Header">
<h1>Kleiner schwarzer Notizblock</h1>
<input type="text" v-model="inputValue" placeholder="Bitte geben Sie die Aufgabe ein"> <button @click="add">Hinzufügen</button>
</div>
<div Klasse="Inhalt">
<ul class="todolist" v-for="(Element, Index) in Liste">
<div Klasse="todo">
<span class="index">{{index+1}}</span><label class="list">{{item}}</label><button class="btn" @click="remove(index)">Löschen</button>
</div>
</ul>
</div>
<div>
<button @click="clearBoth" class="clear">Alle löschen</button>
</div>
</div>
<Skript>
var app = new Vue({
el:"#todoapp",
Daten: {
Liste:["essen","Spiele spielen","Wassermelone essen"],
Eingabewert:""
},
Methoden: {
entfernen:Funktion(Index){
diese.Liste.splice(index,1)
},
hinzufügen: Funktion () {
diese.Liste.push(dieser.Eingabewert)
},
Beide löschen:Funktion(){
diese.Liste.splice(0,diese.Liste.Länge)
}
}
})
</Skript>
</body>
</html>Screenshot des Laufeffekts
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:
|
<<: So ändern Sie die Größe von Partitionen in CentOS7
>>: MySQL Datenbank 8 - detaillierte Erklärung der Anwendung von Funktionen in der Datenbank
Artikel empfehlen
HTML + CSS realisiert das Scrollen zur Elementposition, um den Ladeanimationseffekt anzuzeigen
Wie füge ich jedes Mal eine Ladeanimation hinzu, ...
Der Unterschied zwischen der Speicherung von Zeichen mit voller Breite und Zeichen mit halber Breite in MySQL
Leider trat der Fehler MYSQL_DATA_TRUNCATED währe...
Lösung für den MySQL-Fehlercode 1064
Wenn die Wörter in der SQL-Anweisung mit den Schl...
Detaillierte Erläuterung des Prozesses zum Erstellen eines MQTT-Servers mit Docker
1. Ziehen Sie das Bild Docker-Pull-Registrierung....
JavaScript-Implementierung des Verifizierungscode-Falls
In diesem Artikel wird der spezifische Code für J...
Liste der allgemeinen MySql-Abfragebefehlsoperationen
In MySQL häufig verwendete Abfragebefehle: mysql&...
So lösen Sie das Problem, dass das Softwarepaket bei der Installation von Software unter Linux nicht vorhanden ist
Wenn das Softwarepaket nicht vorhanden ist, kann ...
Zusammenfassung des Speicherorts und Tipps für Docker-Konfigurationscontainer
Tipps zur Verwendung von Docker 1. Bereinigen Sie...
Nginx-Konfiguration: Trennung von PC-Site und mobiler Site zur Realisierung der Umleitung
Verwenden Sie nginx, um die Trennung von PC-Site ...
CentOS 8: Installation des benutzerdefinierten Verzeichnisses nginx (Details zum Tutorial)
1. Tools und Bibliotheken installieren # PCRE ist...
Eine kurze Diskussion über JS-Prototypen und Prototypenketten
Inhaltsverzeichnis 1. Prototyp 2. Prototypzeiger:...
Detaillierte Erläuterung des grundlegenden Falls des React.js-Frameworks Redux
react.js Rahmen Redux https://github.com/reactjs/...
Grafisches Tutorial zur Installation von MySQL 5.5.27
1. Installation von MySQL 1. Öffnen Sie die herun...
Detaillierte Erläuterung des Implementierungsprinzips von ACID-Transaktionen in MySQL
Einführung Beginnen wir wie immer mit einer Szene...
Beispiel für CSS3 zum Erzielen eines Div-Ein- und Ausschiebens von unten nach oben
1. Zuerst müssen Sie den Zielselektor von CSS3 ve...