Vue.jsで作る文字数カウントアプリのサンプルコード

文字数カウントのサンプルコードです。

実際のサンプルはこちら

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

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

code.ameneko.com

サンプルコード

<template>
    <div class="mojisu">
        <input v-model="text" type="text">
        <p>文字数：{{text.length}}</p>
    </div>
</template>

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

<style scoped>

</style>

解説

v-modelでtextに結び付けています。

lengthを使って文字数をカウントさせています。