Vue.jsサンプルコード（07）入力文字数をリアルタイムにプレビューする

• 前記事: 06. 合計金額をリアルタイムに表示する
• 次記事: 08. 入力したカラーコードをリアルタイムでプレビューする

07. 入力文字数をリアルタイムにプレビューするには？

サンプルコード

引き続きVue.jsの双方向データバインディングのサンプルです。

• Vue.jsバージョン: 2.5.2
• 「タイトル」に入力するとすぐ下にリアルタイムで表示され、「本文」に入力すると表示に加えて文字数もリアルタイムで表示されます。
• 文字数は全角文字も1文字として数えられます。
• 冒頭と末尾のスペースはカウントされません。途中のスペースはカウントされます。

前回はHTMLで{{ sum + tax }}と書きましたが、今回のように{{140 - b.length}}というもう少し複雑な書き方も可能です。表示にしか使わない式をこのように書けるのはありがたいことです。

    <div class='panel-footer'>あと {{140 - b.length}} 文字
    </div>

テンプレート構文の制約

Vue.jsのHTMLテンプレート構文{{ }}内に書けるのは単一の式のみに制限されています（公式ドキュメント）。

したがって文やifなどの条件分岐は書けません。ただし三項演算子は書けます。

{{ var a = 1 }}                   <!-- 不可: 文は書けない -->
{{ if (ok) { return message } }}  <!-- 不可: ifなどの制御フローも書けない -->
{{ ok ? 'YES' : 'NO' }}           <!-- OK: 三項演算子は書ける -->

trim

trimを使うことで、冒頭と末尾のスペースが入力時点でトリミングされます。

<textarea class='form-control' v-model.trim='b'></textarea>

06. の宿題の解答例

ウォッチャー（watch:）を使うと簡単です（使いすぎに注意）。

    watch: {
      b: function(v) { if (v < 0) { this.b = 0 } },
      d: function(v) { if (v < 0) { this.d = 0 } },
    },

HTML5のmax属性やmin属性で制限する方法もあります。

• 前記事: 06. 合計金額をリアルタイムに表示する
• 次記事: 08. 入力したカラーコードをリアルタイムでプレビューする

バックナンバー（Vue.jsサンプルコード）

Vue.jsサンプルコード（01〜03）Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

• Vue.jsサンプルコード（04）双方向データバインディングを使ってみる
• Vue.jsサンプルコード（05）複数のinputに同じ変数を割り当てる
• Vue.jsサンプルコード（06）合計金額をリアルタイムに表示する
• Vue.jsサンプルコード（07）入力文字数をリアルタイムにプレビューする
• Vue.jsサンプルコード（08）入力したカラーコードをリアルタイムでプレビューする
• Vue.jsサンプルコード（09）カラーピッカーで選択した色を動的に表示する
• Vue.jsサンプルコード（10）スライダーで入力したカラーコードを動的に表示する
• Vue.jsサンプルコード（11）ラベルをクリックして表示開閉とラベル変更を行う
• Vue.jsサンプルコード（12）特定の単語を入力したらボタンを無効にする
• Vue.jsサンプルコード（13）「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする
• Vue.jsサンプルコード（14）「承認」ボタンを押したら解除できないようにする
• Vue.jsサンプルコード（15）パスワードのマスクを解除する
• Vue.jsサンプルコード（16）パスワードを入力中だけ表示する