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:

Detaillierte Erkundung von vuex 2.0 und Erstellen einer Notizblockanwendung mit vuejs 2.0 + vuex 2.0
Beispiel eines lokalen Notizblocks basierend auf vue2.0+vuex+localStorage
Vue-Implementierung des Notizblockgehäuses
Vue implementiert einen einfachen Notizblock
Vue implementiert eine einfache Notizblockfunktion
Vue implementiert eine kleine Notizblockfunktion
Detaillierte Erklärung des Vue Notepad-Beispiels
Vue implementiert Notizblockfunktion
Erstellung eines Vue-CLI- und Webpack-Notizblockprojekts
Vuex implementiert Notizblockfunktion

<<: So ändern Sie die Größe von Partitionen in CentOS7

>>: MySQL Datenbank 8 - detaillierte Erklärung der Anwendung von Funktionen in der Datenbank