Vue verwendet berechnete Eigenschaften, um die Erstellung dynamischer Schieberegler abzuschließen

<div id="Schieberegler">
        <!-- Wichtigste Animationseffekte: Schriftart, Fortschrittsbalken und Ausdruck ändern sich mit dem Prozentsatz des Emotionsniveaus-->
        <label for="range" :style="{'color':getHappinessColor}">Emotionale Ebene: {{val}}%</label>
<!-- Die Farbe des Schiebereglers sollte an die voreingestellte Farbe gebunden sein und die Farbe kann nach Belieben geändert werden-->
        <!-- Der Wert der Emotionsebene sollte sich auch mit dem Val-Wert ändern-->
        <Eingabetyp="Bereich" Name="" ID="Bereich" min="0" max="100" v-Modell="Wert">
 
<!-- Der Wert des Schiebereglers sollte an val gebunden sein, das in die berechnete Eigenschaft geschrieben wird, um mit dem Bereich der Schieberegler-Füllfarbe unten zu synchronisieren-->
        <div Klasse="Außenschieber">
 <!-- Lassen Sie uns die Breite des Etiketts gleich der Breite unseres Datencenter-Werts machen, sodass sich das Etikett mit der Bewegung des Schiebereglers bewegt und der Effekt einer Änderung des Ausdrucks erreicht wird-->
        <label für="" Klasse="Schieberegler inner" :style="{'width':val+'%',
        'Randradius':greaterThanFifty">
                <span:style="{'right':getPlacement}">{{getHappiness}}</span>
            </Bezeichnung>
        </div>
    </div>

*{
    Polsterung: 0;
    Rand: 0;
    Listenstil: keiner;
}
:Wurzel {
    /* Globale CSS-Variablen */
    --gelb: #ffd100;
    --orange: #ff6a13;
    --Dunkelgrau: #53565a;
    --Mittelgrau: #888b8d;
    --weiß: #fff;
  }
*,*::nach,*::vor{
    Farbe: var(--darkGray);
    Box-Größe: Rahmenbox;
}
html, Text {
      Breite: 100 %;
      Höhe: 100%;
}
Körper{
      Mindesthöhe: 100vh;
      Anzeige: Flex;
      Inhalt ausrichten: zentriert;
      Elemente ausrichten: zentrieren;
      Hintergrundfarbe: var(--white);
}
#Schieberegler{
    /* Lokale CSS-Variablen */
    --Rundheit: 20px;
    Breite: 100 %;
    maximale Breite: 600px;
    Umriss: 1px gestrichelt rot;
    Polsterung: 4vh;
 
    /* Rasterlayout */
    Anzeige: Raster;
    Inhalt ausrichten: strecken;
}
#Schieberegler>Beschriftung{
    Breite: 100 %;
    Schriftgröße: 1,5em;
    Polsterung: 0 0 0,5em;
    Rand: automatisch;
}
#Schieberegler-Eingabe{
    Gitterzeile: 2 / 3;
    Gitterspalte: 1 / 2;
    Breite: 100 %;
    Position: relativ;
    Z-Index: 1;
    Deckkraft: 0;
    Höhe: berechnet (var (--Rundheit) * 2);
    Cursor: Zeiger;
}
#Schieberegler .äußerer{
    Breite: 100 %;
    Höhe: var(--Rundheit);
    Hintergrundfarbe: var(--midGray);
    Rahmenradius: var(--roundness);
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
    Position: relativ;
    Z-Index: 0;
    Rand: automatisch;
    Gitterzeile: 2/3;
    Gitterspalte: 1/2;
}
 
#Schieberegler Eingabe: Fokus + .äußerer {
    Umriss: 1px gestrichelt var(--orange);
  }
 
#Schiebereglerbezeichnung.inner {
    Position: absolut;
    Breite: 100 %;
    Höhe: 100%;
    Hintergrund: var(--white);
    Hintergrund: linearer Farbverlauf (nach links, var (--gelb), var (--orange));
    Rahmen oben links Radius: var(--roundness) !important;
    Rahmen unten links Radius: var(--roundness) !important;
    Position: absolut;
    Übergang: alle 0,3 s kubisch-bézier (0,5, 0,4, 0,2, 1);
    Textausrichtung: rechts;
    Schriftgröße: calc(var(--roundness) * 2);
    Zeilenhöhe: 1;
  }
  #Schiebereglerbezeichnung.innerer Bereich {
    Position: absolut;
    rechts: -2px;
    oben: calc(50% - var(--roundness) * 2);
    oben: calc(var(--roundness) * -.3);
    Übergang: erben;
  }

<script src="./js/vue.js"></script>
    <Skript>
        sei ein = neuer Vue({
            el:"#Schieberegler",
            Daten() {
                zurückkehren {
                    Wert: 70,
                    //Schlüsselpunkte, die auch zur dynamischen Verknüpfung von 1: Emotionsprozentsatz, 2: angezeigter Textausdruck verwendet werden}
            },
            montiert() {
                dieser.Wert = Math.floor(Math.random() * 101)
            },
            berechnet: {
        getPlacement: Funktion () {
            gibt `${(-0,009 * ((this.val * -1) + 104))}em` zurück;
            // Position abrufen. Da es sich um eine berechnete Eigenschaft handelt, entspricht dies der Bindung an val. Nach der Bindung an den unteren Bereich entspricht es der Breite, die oben an val gebunden ist.
        },
        greaterThanFifty: Funktion () {
            gibt this.val > 50 zurück? `var(--roundness)`: `0`;
            // Wenn der Val-Wert größer als 50 ist, ändert sich die Grenze. Er kann weggelassen oder nicht gebunden werden. Das ist nicht kritisch.},
        getHappinessColor: Funktion () {
            gibt `rgba(255, ${106 + (103 / 100 * this.val)}, ${(Math.floor(this.val * -1 / 7.692)) + 13}` zurück;
            // Funktion zum Abrufen der Farbe. Sie können den Wert nach Belieben ändern, aber der Farbübergang oben ist natürlicher},
        getHappiness: Funktion () {
            lass die Stimmung;
            // Den Val-Wert physisch an alle Ausdrücke binden
            wenn (this.val == 0) {
                Stimmung = "🤬"
            } sonst wenn (dieser.Wert < 10) {
                Stimmung = "😡"
            } sonst wenn (this.val < 20) {
                Stimmung = "😠"
            } sonst wenn (this.val < 30) {
                Stimmung = "😦"
            } sonst wenn (this.val < 40) {
                Stimmung = "☹️"
            } sonst wenn (this.val < 50) {
                Stimmung = "🙁"
            } sonst wenn (this.val < 60) {
                Stimmung = "😐"
            } sonst wenn (this.val < 70) {
                Stimmung = "🙂"
            } sonst wenn (this.val < 80) {
                Stimmung = "😊"
            } sonst wenn (this.val < 90) {
                Stimmung = "😄"
            } sonst wenn (this.val < 100) {
                Stimmung = "😃"
            } sonst wenn (this.val == 100) {
                Stimmung = "😍"
            }
            Rückkehrstimmung;
        }
    }
        })
    </Skript>