- 前記事: 23. テキストフィールドの文章量に応じて縦幅を自動拡張する
- 次記事: 25. クイズの答えをダイアログに入力しないと送信できないようにする
24. テキストフィールドの文章量に応じて縦幅を自動拡張する
- Vue.jsバージョン: 2.5.2
- テキストフィールドの文章量が増えるとフィールドが下に拡張し、文章量が減ると上に縮小します。
- 画面をリロードすると最初の状態に戻ります。
サンプルコード
ポイント: 前回の23. テキストフィールドの文章量に応じて縦幅を自動拡張するほど厳密ではありません。行数を予測可能なテキストについてのみ使えます。
<textarea class="form-control" v-model="a" :rows="4 + a.length / 40"></textarea>
- 前記事: 23. テキストフィールドの文章量に応じて縦幅を自動拡張する
- 次記事: 25. クイズの答えをダイアログに入力しないと送信できないようにする
バックナンバー（Vue.jsサンプルコード）
- 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）パスワードを入力中だけ表示する
- Vue.jsサンプルコード（17）[いいね]ボタンを押すとボタンが文言に変わる
- Vue.jsサンプルコード（18）スター[★]を1回だけ押せるようにする
- Vue.jsサンプルコード（19）文字をクリックすると編集できるようにする
- Vue.jsサンプルコード（20）スター[★★★☆☆]をクリックして数値を1桁だけ入力する
- Vue.jsサンプルコード（21）[はい][いいえ]ボタンを押すと表示を変える
- Vue.jsサンプルコード（22）YouTube風の[
![👆]()
][![👇]()
]ボタンで1度だけGood/Bad評価する - Vue.jsサンプルコード（23）テキストフィールドの行数に応じて縦幅を自動拡張する
][
]ボタンで1度だけGood/Bad評価する