Vue.jsのv-classとv-model

このエントリは、v-classを初めて使ったのでその説明だけ載せるようと思っていましたが、説明用に作成したコードで詰まりかけたので、
v-modelとの兼ね合いも書いておきます。

チェックボックスで使うv-class

v-classは、Vue.jsオブジェクトの値を元に、classを設定するディレクティブになります。

シンプルな形で書いてみます。

<div id="app">
  <input type="checkbox" v-model="hoge">hoge
  <input type="checkbox" v-model="hage">hage
  <hr>
  <p v-class="bold: hoge">hoge</p>
  <p v-class="bold: hage">hage</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    hoge: false,
    hage: false
  }
});

.bold {
  font-weight: bold;
}

hogeをチェックすると、下のhogeが太字になります。hageも同様です。 このとき、v-modelでvue.jsに渡されるのは、trueかfalseです。 v-classで真偽値を扱う場合は、bold: hogeのように引数をつけます。

セレクトボックスで使うv-class

では、selectタグのように、v-modelで真偽値ではなく、文字列が渡される場合はどのようにしたら良いのでしょうか。 また簡単なサンプルを載せます。

<div id="app">
  <select v-model="freeza" size="4">
    <option value="first-form">第1形態</option>
    <option value="second-form">第2形態</option>
    <option value="third-form">第3形態</option>
    <option value="fourth-form">第4形態</option>
  </select>
  <div v-class="freeza"></div>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    freeza: ""
  }
});

.first-form {
  background: url("../images/freeza-first.jpg");
  width: 400px;
  height: 232px;
}

.second-form {
  background: url("../images/freeza-second.jpg");
  width: 280px;
  height: 300px;
}

.third-form {
  background: url("../images/freeza-third.jpg");
  width: 200px;
  height: 288px;
}

.fourth-form {
  background: url("../images/freeza-fourth.jpg");
  width: 280px;
  height: 460px;
}

例えば、セレクトボックスの第1形態を選択すると、divのbackgroundで第1形態の画像がでてくるようにしました。 この場合、選択されていない状態は

data {
  freeza: ""
}

で、 選択されるとvalueの値がfreezaに設定されるイメージです。

data {
  freeza: "first-form"
}

divのclass名はv-class="freeza"としてありますが、 v-classは引数無しだと、vueオブジェクトの値をそのままclass名にしてくれます。

これは実際セレクトボックスを選択したあとv-class="first-form"になります。 そのため、cssにはoptionのvalueをそのままクラス名として書けばOKなのです！