【Vue.js】No.003 ユーザーによるイベント制御

ボタンクリックでテキスト反転

「v-on」というのが鍵のようです。
例えば、ボタンをクリックでテキスト反転という処理をVue.js上で再現してみたいと思います。
HTMLは以下のように。

<div id="test">
  <button v-on:click="reverseText">下のテキスト反転</button>
  <p>{{ message }}</p>
</div>

続いてJSは以下のように。

var test = new Vue( {
  el: '#test',
  data: {
    message: 'yrrehC kcalB dicA'
  },
  methods: {
    reverseText: function(){
      this.message = this.message.split('').reverse().join('')
    }
  }
} );

実際の結果は、以下のボタンより確認できます。

テキストが反転され、Acid Black Cherryというアーティスト名になりましたね。

v-on:click="reverseText"というHTML側の記述により、JS側で定義されたreverseTextという関数が実行されたという流れになりますね。

キー操作による処理

EnterやDelete、またキーコード指定によるカスタムキー等のキー操作による処理も「v-on」を使うことにより実装可能です。

今回はテキストフィールド上でエンターキーを押された場合に、入力された値の税込みが表示されるようなスクリプトを例にしてみたいと思います。

HTML

<div id="test2" class="section__results">
  <input type="number" v-model="num" v-on:keyup.enter="calc">
  <p>計算後：<strong>{{ results }}</strong></p>
</div>

var test2 = new Vue( {
  el: '#test2',
  data: {
    num: 0,
    results: '消費税込みの数値'
  },
  methods: {
    calc: function(){
      this.results = this.num * 1.08
    }
  }
} );

以下にあるテキストフィールドに、数値を入力後、エンターキーを押してみてください。

←入力後エンターキー！

計算後：{{ results }}

テキストフィールド下の計算後：という所に計算後の数値が出力されたかと思います。

テキストフィールドに属性指定されているv-on:keyup.enter="calc"により、JSで定義されたcalcという関数が実行されるという形ですね。

一覧に戻る