v-sliderの値を合計

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「Vue.js」のレンジスライダー「v-slider」を複数設置し、その合計を表示させてみたいと思います。

v-slider設置

まずはv-sliderを5個設置します。

国語（Japanese）算数（Mathematics）理科（Science）社会（SocialStudies）英語（English）の5科目の点数のレンジスライダーを作ってみます。

<div id="app">
  <v-app>
    <v-main>
      <v-container>

        <h4>こくご</h4>
        <v-slider
          v-model="Japanese"
          thumb-label
        ></v-slider>

        <h4>さんすう</h4>
        <v-slider
          v-model="Mathematics"
          thumb-label
        ></v-slider>

        <h4>りか</h4>
        <v-slider
          v-model="Science"
          thumb-label
        ></v-slider>
          
        <h4>しゃかい</h4>
        <v-slider
          v-model="SocialStudies"
          thumb-label
        ></v-slider>

        <h4>えいご</h4>
        <v-slider
          v-model="English"
          thumb-label
        ></v-slider>

      <v-container>
    <v-main>
  <v-app>
</div>

v-sliderのデフォルトの最小値は0、最大値は100みたいなので、今回はmaxとminは省略しました。

スクリプトで初期値を設定します。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    Japanese: 0,
    Mathematics: 0,
    Science: 0,
    SocialStudies: 0,
    English: 0
  }
});

合計と平均を出力

いろいろ調べてみたのですが、v-sliderの値を取得する方法はわかりませんでした。

合計や平均を出力するにはcomputedを使えばできそうです。

参考：TechRacho｜Vue.jsサンプルコード（06）合計金額をリアルタイムに表示する

まずは出力欄です。マスタッシュ構文を使います。

文字列は何でもいいですが、合計をsum、平均をavgとしておきます。

<p>合計 {{sum}} 点</p>

<p>平均 {{avg}} 点</p>

先程のスクリプトに追記します。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    Japanese: 0,
    Mathematics: 0,
    Science: 0,
    SocialStudies: 0,
    English: 0
  },
  computed: {
    sum: function() { 
      return this.Japanese + this.Mathematics + this.Science + this.SocialStudies + this.English
    },
    avg: function() { 
      return (this.Japanese + this.Mathematics + this.Science + this.SocialStudies + this.English) / 5
    }
  }
});

せっかくなので、結果によって数字の色を変えてみましょう。

v-if、v-else-if、v-elseを使います。

例えば合計点が0～249点で赤、250～499点で黄色、合計点が500点で緑という感じにするには、

<span v-if="sum == 500" class="text-success">{{sum}}</span>
<span v-else-if="sum >= 250" class="text-warning">{{sum}}</span>
<span v-else class="text-danger">{{sum}}</span>

ここは独学なので合ってるかどうかわかりません＞＜

以下の例では、青とかオレンジとか虹色とか色をいろいろ増やしてみました。

こくご

さんすう

りか

しゃかい

えいご

合計 {{sum}} {{sum}} {{sum}} {{sum}} {{sum}} {{sum}} 点

平均 {{avg}} {{avg}} {{avg}} {{avg}} {{avg}} {{avg}} 点

 

まとめ

・computedを使う

・マスタッシュ（二重中括弧）を使う

・v-if、v-else-if、v-elseを使う

v-sliderの色を変える方法もあるみたいなので、今度挑戦してみます。