@inputを使用したコード例

@inputを使用したコード例です。この例では、テキストボックスに入力された値をリアルタイムで反映し、その入力内容を表示します。

<div id="app">
  <input type="text" v-model="inputValue" @input="handleInput">
  <p>入力された値: {{ inputValue }}</p>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      inputValue: ''
    },
    methods: {
      handleInput: function(event) {
        this.inputValue = event.target.value;
      }
    }
  });
</script>

このコードでは、<input>要素にv-modelディレクティブを使用して、テキストボックスとVue.jsのデータ(inputValue)をバインドしています。また、@inputディレクティブを使用して、テキストボックスの値が変更されたときにhandleInputメソッドを呼び出します。handleInputメソッドは、入力された値をVue.jsのデータに反映します。

このようにして、@inputを使用することで、ユーザーがテキストボックスに入力するたびに、その入力内容をリアルタイムで監視し、Vue.jsのデータに反映させることができます。そして、その変更を他の部分にリアルタイムで反映することが可能です。