Vue は小数点付きの星評価を実装します

この記事では、小数点付きの星評価を実装するためのVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

まずvue.jsファイルをインポートする必要があります

CSS部分

<スタイル>
 主要{
  位置:相対;
  }
 .star_line{
  /* 改行を強制しないように設定します */
  幅スペース:nowrap;
  オーバーフロー: 非表示;
  位置: 絶対;
  }
 。星{
  表示: インラインブロック;
  /* マウスを星の上に置いたときに小さな手の形に変わるように設定します*/
  カーソル: ポインタ
  }
</スタイル>

体

<div id="アプリ">
 <input type="text" v-model.number="スコア">
 <- 双方向バインディングでバインドされた値を受け取るコンポーネントは、値を使用して受け取る必要があります。原則は次のとおりです。input ->
 <v-star v-model="スコア"></v-star>
</div>

js 部分では、コンポーネントを使用し、入力はルートコンポーネントにあり、作成した星はコンポーネント内に配置されます。星の評価は主に、親コンポーネントと子コンポーネントが互いに値を受け渡す双方向バインディングによって実現されます。

コンポーネントテンプレート部分

<script id="v-star" type="text/html">
    <main :style="mainStyle">
        <!-- ホワイト スター -->
        <div class="star_line">
            <span @click="changeValue(star)" class="star" :style="starStyle" v-for="star in total">☆</span>
        </div>
        <!-- ブラックスター -->
        <div class="star_line" :style="blackStyle">
            <span @click="changeValue(star-1)" class="star" :style="starStyle" v-for="合計星数">★</span>
        </div>
    </メイン>
</スクリプト>

js部分

<スクリプト>
    Vue.component("v-star",{
        テンプレート:"#v-star",
        小道具:{
            合計：{
                デフォルト:10、
            },
            サイズ：{
                デフォルト:30
            },
            // 親コンポーネントから渡されたスコアを受け取る
            価値：{}
        },
        // 計算プロパティ computed:{
            メインスタイル(){
                戻る {
                    幅: this.size * this.total + "px",
                }
            },
            スタースタイル(){
                戻る {
                    幅:this.size + "px",
                    高さ:this.size + "px",
                    フォントサイズ: this.size + 6 + "px"
                }
            },
            ブラックスタイル(){
                戻る {
                    幅:この値 / この合計 * 100 + "%"
                }
            }
        },
        方法:{
            値の変更(値){
                // 最新の結果を入力に渡す
                // 入力タグにはデフォルトの入力イベントがあります this.$emit("input",value)
            }
        }
    })

    新しいVue({
        el:"#アプリ",
        データ：{
            スコア:1
        }
    })
</スクリプト>

レンダリング