読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

vue.js 1.0 その0001-003 フォーム入力バインディング select要素

制作 vuejs

参考にさせて頂いたページ

フォーム入力バインディング - vue.js

プルダウンに表示されている文字列をバインディングする例

option要素にvalue属性を設定していない場合は、表示されている文字列がそのままバインディングされます。

<div id="app">
  <select v-model="aaa">
    <option selected>ラベル1</option>
    <option>ラベル2</option>
    <option>ラベル3</option>
  </select>
  <span>選択された要素: {{ aaa }}</span>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<script type="text/javascript">
//インスタンス作成
var hoge = new Vue({
  el : '#app',
  data : {
    aaa : ''
  }
});
</script>

プルダウンに表示されているものとは別の文字列をバインディングする例

option要素にvalue属性を設定すると、その値がバインディングされます。

<div id="app">
  <select v-model="aaa">
    <option value="値1" selected>ラベル1</option>
    <option value="値2">ラベル2</option>
    <option value="値3">ラベル3</option>
  </select>
  <span>選択された要素: {{ aaa }}</span>
</div>

<?php
// echo $this->Html->script('/assets/js/vue.js');
?>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<script type="text/javascript">
//インスタンス作成
var hoge = new Vue({
  el : '#app',
  data : {
    aaa : ''
  }
});
</script>