v-modelのサンプルコード

Vue.jsの強力なメリットであるv-modelを理解するためのサンプルコードです。

今回は、文字を入力したらすぐに反映される機能を例にします。

実際のサンプルはこちら

VueとFirebaseコード集｜あめねこサンプルコード集

VueとFirebaseのサンプルコードに特化したサイト。あめねこサンプルコード集では、一つのページで動作確認とサンプルコードが閲覧ができるため初心者や入門者にもわかりやすくなっています。

code.ameneko.com

サンプルコード

<template>
    <div class="v-model_component">
        <p>文字を入力してね→<input v-model="text" type="text"></p>
        <p>入力した文字</p>
        <p>{{this.text}}</p>
        <p>文字数：{{this.text.length}}</p>
    </div>
  
</template>

<script>
export default {
    data(){
        return{
            text: '',
        }
    }
}
</script>

<style scoped>

</style>

解説

<input v-model="text" type="text">

このコードが今回の肝です。

v-modelでtextという変数をバインディングしています。これにより、textの値が変更されたときにデータに反映されるようにしています。

{{this.text}}

先ほどのv-modelで紐付けたtextを表示させています。

    data(){
        return{
            text: '',
        }
    }

変数textの設定です。最初は値をいれていませんがv-modelで設定したように変化します。

以上です。

実際にこのサンプルコードを触ってもらえばすぐにイメージはつくと思います。