Vue implementiert Sternebewertung mit Dezimalstellen

<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>

<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>

<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>

<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>