Vueは計算プロパティを使用して動的スライダーの作成を完了します

<div id="スライダー">
        <!-- 主なアニメーション効果: フォント、進行状況バー、表情が感情レベルのパーセンテージに応じて変化します -->
        <label for="range" :style="{'color':getHappinessColor}">感情レベル: {{val}}%</label>
<!-- スライダーの色は事前に設定された色にバインドされ、色は自由に変更できます-->
        <!-- 感情レベルの値も val 値に応じて変化します -->
        <input type="range" name="" id="range" min="0" max="100" v-model="val">
 
<!-- スライダーの値は、下のスライダーの塗りつぶし色の範囲と同期するために、計算プロパティに書き込まれる val にバインドされる必要があります -->
        <div class="スライダー外側">
 <!-- ラベルの幅をデータ センター val の幅と同じにして、スライダーの動きに合わせてラベルが移動し、表現を変更する効果を実現しましょう -->
        <label for="" class="スライダーインナー" :style="{'width':val+'%',
        'border-radius':greaterThanFifty">
                <span :style="{'right':getPlacement}">{{getHappiness}}</span>
            </ラベル>
        </div>
    </div>

*{
    パディング: 0;
    マージン: 0;
    リストスタイル: なし;
}
：根 {
    /* グローバル CSS 変数 */
    --黄色: #ffd100;
    --オレンジ: #ff6a13;
    --ダークグレー: #53565a;
    --midGray: #888b8d;
    --白: #fff;
  }
*,*::後、*::前{
    色: var(--darkGray);
    ボックスのサイズ: 境界線ボックス;
}
html、本文{
      幅: 100%;
      高さ: 100%;
}
体{
      最小高さ: 100vh;
      ディスプレイ: フレックス;
      コンテンツの中央揃え: 中央;
      アイテムの位置を中央揃えにします。
      背景色: var(--white);
}
＃スライダー{
    /* ローカル CSS 変数 */
    --丸み: 20px;
    幅: 100%;
    最大幅: 600px;
    アウトライン: 1px 破線赤;
    パディング: 4vh;
 
    /* グリッドレイアウト */
    表示: グリッド;
    コンテンツの正当化: ストレッチ;
}
#スライダー>ラベル{
    幅: 100%;
    フォントサイズ: 1.5em;
    パディング: 0 0 0.5em;
    マージン: 自動;
}
#スライダー入力{
    グリッド行: 2 / 3;
    グリッド列: 1 / 2;
    幅: 100%;
    位置: 相対的;
    zインデックス: 1;
    不透明度: 0;
    高さ: calc(var(--roundness) * 2);
    カーソル: ポインタ;
}
#スライダー.outer{
    幅: 100%;
    高さ: var(--roundness);
    背景色: var(--midGray);
    境界の半径: var(--roundness);
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの位置を中央揃えにします。
    位置: 相対的;
    zインデックス: 0;
    マージン: 自動;
    グリッド行: 2/3;
    グリッド列: 1/2;
}
 
#スライダー入力:フォーカス + .outer {
    アウトライン: 1px 破線 var(--orange);
  }
 
#スライダーラベル.inner {
    位置: 絶対;
    幅: 100%;
    高さ: 100%;
    背景: var(--white);
    背景: linear-gradient(左へ、var(--yellow), var(--orange));
    左上の境界線の半径: var(--roundness) !important;
    境界線の左下の半径: var(--roundness) !important;
    位置: 絶対;
    遷移: すべて 0.3 秒 cubic-bezier(0.5, 0.4, 0.2, 1);
    テキスト配置: 右;
    フォントサイズ: calc(var(--roundness) * 2);
    行の高さ: 1;
  }
  #スライダー label.inner span {
    位置: 絶対;
    右: -2px;
    上: calc(50% - var(--roundness) * 2);
    上: calc(var(--roundness) * -.3);
    遷移: 継承;
  }

<script src="./js/vue.js"></script>
    <スクリプト>
        a = new Vue({
            el:"#スライダー",
            データ（） {
                戻る {
                    値: 70,
                    //キーポイント。1: 感情のパーセンテージ、2: 表示されるテキスト表現を動的に関連付けるためにも使用されます}
            },
            マウント() {
                this.val = Math.floor(Math.random() * 101)
            },
            計算: {
        getPlacement: 関数 () {
            `${(-0.009 * ((this.val * -1) + 104))}em` を返します。
            // 位置を取得します。これは計算プロパティなので、val にバインドするのと同じです。下のスパンにバインドすると、上の val にバインドされた幅と同じになります。
        },
        50より大きい: 関数() {
            this.val > 50 ? `var(--roundness)` : `0` を返します。
            // val 値が 50 より大きい場合、境界が変わります。省略したり、境界を定めなくてもかまいません。重要ではありません。},
        getHappinessColor: 関数（）{
            `rgba(255, ${106 + (103 / 100 * this.val)}, ${(Math.floor(this.val * -1 / 7.692)) + 13}` を返します。
            // 色を取得する関数。値は自由に変更できますが、上記の色の変化の方が自然です},
        getHappiness: 関数 () {
            気分を盛り上げる;
            // val値をすべての式に「物理的にバインド」する
            （this.val == 0）の場合{
                気分 = "🤬"
            } それ以外の場合 (this.val < 10) {
                気分 = "😡"
            } それ以外の場合 (this.val < 20) {
                気分 = "😠"
            } それ以外の場合 (this.val < 30) {
                気分 = "😦"
            } それ以外の場合 (this.val < 40) {
                気分 = "☹️"
            } それ以外の場合 (this.val < 50) {
                気分 = "🙁"
            } それ以外の場合 (this.val < 60) {
                気分 = "😐"
            } それ以外の場合 (this.val < 70) {
                気分 = "🙂"
            } それ以外の場合 (this.val < 80) {
                気分 = "😊"
            } それ以外の場合 (this.val < 90) {
                気分 = "😄"
            } それ以外の場合 (this.val < 100) {
                気分 = "😃"
            } それ以外の場合 (this.val == 100) {
                気分 = "😍"
            }
            気分を返す;
        }
    }
        })
    </スクリプト>