Vue implementiert Sternebewertung mit Dezimalstellen

Vue implementiert Sternebewertung mit Dezimalstellen

In diesem Artikel wird der spezifische Code von Vue zur Implementierung der Sternebewertung mit Dezimalstellen zu Ihrer Information veröffentlicht. Der spezifische Inhalt ist wie folgt

Zuerst müssen wir die Datei vue.js importieren

CSS-Teil

<Stil>
 hauptsächlich{
  Position: relativ;
  }
 .Sternlinie{
  /* So einstellen, dass kein Zeilenumbruch erzwungen wird */
  Breite-Abstand:nowrap;
  Überlauf: versteckt;
  Position: absolut;
  }
 .Stern{
  Anzeige: Inline-Block;
  /* Stellen Sie die Maus so ein, dass sie die Form einer kleinen Hand annimmt, wenn sie auf einen Stern gelegt wird*/
  Cursor: Zeiger
  }
</Stil>

Körper

<div id="app">
 <Eingabetyp="Text" v-Modell.Nummer="Ergebnis">
 <- Wenn eine Komponente den gebundenen Wert in einer bidirektionalen Bindung empfängt, muss sie value verwenden, um ihn zu empfangen. Das Prinzip ist wie folgt: Eingabe ->
 <v-star v-model="Ergebnis"></v-star>
</div>

Im JS-Teil verwenden wir Komponenten, die Eingabe erfolgt in der Stammkomponente und die von uns erstellten Sterne werden in einer Komponente platziert. Die Sternebewertung wird hauptsächlich durch bidirektionale Bindung realisiert, bei der die übergeordnete Komponente und die untergeordnete Komponente Werte aneinander weitergeben.

Komponentenvorlagenteil

<script id="v-star" type="text/html">
    <main:style="Hauptstil">
        <!-- Weißer Stern -->
        <div Klasse="Sternlinie">
            <span @click="changeValue(star)" class="star" :style="starStyle" v-for="insgesamt Sterne">☆</span>
        </div>
        <!-- Schwarzer Stern -->
        <div Klasse="Sternlinie" :style="schwarzerStil">
            <span @click="changeValue(star-1)" class="star" :style="starStyle" v-for="insgesamt Sterne">★</span>
        </div>
    </main>
</Skript>

js-Teil

<Skript>
    Vue.Komponente("v-star",{
        Vorlage:"#v-star",
        Requisiten:{
            gesamt:{
                Standard: 10,
            },
            Größe:{
                Standard: 30
            },
            // Erhalte den Score, der von der übergeordneten Komponente übermittelt wurde
            Wert:{}
        },
        // Berechnete Eigenschaften berechnet:{
            Hauptstil(){
                zurückkehren {
                    Breite:diese.Größe * diese.Gesamt + "px",
                }
            },
            SternStyle(){
                zurückkehren {
                    Breite:diese.Größe + "px",
                    Höhe:diese.Größe + "px",
                    Schriftgröße: diese.Größe + 6 + "px"
                }
            },
            schwarzerStil(){
                zurückkehren {
                    Breite:dieser.Wert / dies.Gesamt * 100 + "%"
                }
            }
        },
        Methoden:{
            Wert ändern(Wert){
                // Übergebe das neuste Ergebnis an die Eingabe
                // Das Eingabe-Tag hat ein Standard-Eingabeereignis this.$emit("input",value)
            }
        }
    })

    neuer Vue({
        el:"#app",
        Daten:{
            Punktzahl:1
        }
    })
</Skript>

Rendern

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:
  • Vue2.0 implementiert den Beispielcode der Front-End-Sternebewertungsfunktionskomponente

<<:  CentOS 7 - Lösungsprozessdiagramm für vergessene Passwörter

>>:  Fehlerbehebung bei Master-Slave-Verzögerungsproblemen beim Upgrade von MySQL 5.6 auf 5.7

Artikel empfehlen

HTML-Tutorial: Titelattribut und Alt-Attribut

XHTML ist die Grundlage des CSS-Layouts. jb51.net...

Standards zum Schreiben von Codekommentaren bei der Webseitenerstellung

<br />Ich habe die in meiner Arbeit verwende...

So führen Sie einen Befehl zu einem bestimmten Zeitpunkt in Linux aus

Neulich habe ich rsync verwendet, um eine große D...

Beispielcode für CSS-Flex-Layout mit automatischem Zeilenumbruch

Um einen Flex-Container zu erstellen, fügen Sie e...

Änderung der Standardquelldatei sources.list des Ubuntu20.04 LTS-Systems

Wenn Sie den Inhalt der Datei „source.list“ verse...

Parameter, um Iframe transparent zu machen

<iframe src="./ads_top_tian.html" all...

So ändern Sie die IP-Einschränkungsbedingungen des MySQL-Kontos

Vorwort Kürzlich stieß ich bei der Arbeit auf ein...

Skriptbeispiel zum Starten und Stoppen von Spring-Boot-Projekten in Linux

Es gibt drei Möglichkeiten, ein Springboot-Projek...

Implementierungscode für mehrzeilige Textkomponenten der Vue-Faltanzeige

Faltdisplay mit mehrzeiligem Textbaustein Falten ...

Beispielcode für die Vue-Bildzuschneidekomponente

Beispiel: Tipp: Diese Komponente basiert auf der ...

Mit wie vielen Pixeln sollte eine Webseite gestaltet werden?

Viele Webdesigner sind beim Entwurf des Webseitenl...

Lösung für zu große Mysql-Binlog-Protokolldateien

Inhaltsverzeichnis 1. Verwandte Binlog-Konfigurat...

Das Homepage-Design spiegelt am besten das Niveau des Webdesigners wider

Bei den vielen Projekten, an denen ich mitgearbei...

Besprechen Sie die Anwendung von Mixin in Vue

Mixins bieten eine sehr flexible Möglichkeit, wie...