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

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属性で制限する方法もあります。


バックナンバー(Vue.jsサンプルコード)

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

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

Twitter: @hachi8833、GitHub: @hachi8833 コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。 これまでにRuby on Rails チュートリアル第2版の半分ほど、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れてそれぞれ一部を翻訳。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 実は最近Go言語が好き。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

hachi8833の書いた記事

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ