Character counter in Vue.js

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

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

デモ

現在{{ charaCount }}文字

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

コード

<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だとコードが簡潔に書けるのでいいですね。