【Vue.js】フォームに入力した文字数をカウントする方法

2018年11月29日

最近Vue.jsを勉強し始めたので、フォームに入力した文字数をリアルタイムに表示するものを作ってみました。

デモ

現在0文字

※動かない場合、リロードしてみてください。

コード

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
    <textarea v-model="typedText" rows="7" cols="50"></textarea>
    <p>現在{{ charaCount }}文字</p>
</div>


<script>
new Vue({
    el: '#app',
    data: {
        typedText: ''
    },
    computed: {
        charaCount: function() {
            return this.typedText.length;
        }
    }
})
</script>

Vue.jsだとコードが簡潔に書けるのでいいですね。