vue.jsでセレクトボタンを使ってCSSを変更する

この記事で分かること

• セレクトボタンを使ってのイベント処理
• dataで指定した値を使う方法

こちらの記事ではセレクトボタンを押した時にイベント処理を行い、cssを変更する方法を紹介します。

完成物のイメージとしてはセレクトボタンで指定した色にテキストの文字色が変わるというものです。

検索してもピンポイントで記事がすぐにヒットしなかったので、備忘録を兼ねて作成しました。
処理の詳しい理由などについては他の記事を参考にして頂ければ幸いです。

テンプレート

html

<select v-model="select" v-on:change="colorchange">
  <option value="black">黒</option>
  <option value="green">緑</option>
  <option value="blue">青</option>
  <option value="red">赤</option>
</select>

今回使うディレクティブはv-modelとv-on:changeの2つです。

vueインスタンス

main.js

var app = new Vue({
  el: "#app1",
  data: {
    select: ""
  },
  methods: {
    colorchange: function () {
      switch (this.select) {
        case "red":
          app1.style.color = "red";
          break;

        case "green":
          app1.style.color = "green";
          break;

        case "black":
          app1.style.color = "black";
          break;

        case "blue":
          app1.style.color = "blue";
          break;
      }
    }
  }
})

解説

処理の全体的な流れはまず、v-modelを使ってセレクトボタンで指定されたvalue属性をdata(オプションオブジェクト)に追加します。
それから、v-on:changeを使ってセレクトボタの選択に応じた処理を行うメソッドを作成していきます。

v-model

main.js

<select v-model="select">

v-modelで指定するプロパティ名はdataで指定するものと同じにします。
今回はselectとしました。

main.js

var app = new Vue({
  el: "#app1",
  data: {
    select: ""
  }

このselectプロパティをdataにも記述します。

v-on:change

<select v-model="select" v-on:change="colorchange">

v-on:changeを使って、メソッド名を記述します。
今回はcolorchangeとしました。

main.js

  methods: {
    colorchange: function () {
      switch (this.select) {
        case "red":
          app1.style.color = "red";
          break;

        case "green":
          app1.style.color = "green";
          break;

        case "black":
          app1.style.color = "black";
          break;

        case "blue":
          app1.style.color = "blue";
          break;
      }
    }
  }

methodsの方でもcolorchangeメソッドを記述していきます。
switch文の中身については割愛させていただきますが、ここで1つポイントがあります。

それは、switch文で使う条件式についてです。
セレクトボタンで指定されたvalue属性に応じて処理を分けていきたいのですが、value属性の値は先ほど、v-modelで指定したselectに代入されています。
なので、条件式にはthis.selectと記述することでdataに代入されたvalue属性に応じて処理を分けていくことができます。
つまり、thisを使うことによってdataのプロパティを使えます。

分かりにくい言い回しなどあったかと思いますが、最後までお読み頂きありがとうございました。