v-modelのサンプルコード

vue
スポンサーリンク

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

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

実際のサンプルはこちら

サンプルコード

<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で設定したように変化します。

以上です。

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

コメント

タイトルとURLをコピーしました