12. 特定の単語を入力したらボタンを無効にする
- Vue.jsバージョン: 2.5.2
- フィールドに「WIP」という単語が含まれている場合に「Merge」ボタンを無効にします。
- 「WIP」が他の英単語の一部の場合は無視されます。
- 「WIP」が日本語などの2バイト文字に接している場合は単語とみなされません。
- 小文字の「wip」でも「Merge」ボタンは無効になります。
サンプルコード
ポイントはreturn /\bWIP\b/i.test(this.a)の行です。正規表現でiを指定しているので大文字小文字は区別されません。
const vm = new Vue({
el: "#app",
data: {a: "WIP: 親譲りの無鉄砲で小供の時から損ばかりしている"},
computed: {
b: function() {
return /\bWIP\b/i.test(this.a) 👈
},
},
})
aでHTMLのinputクラスのv-model属性を参照しています。
<input class="form-control" v-model="a" />
補足: ES6のメソッド定義の省略形
ECMAScript 2015（ES6）より、上のコードのb: function()部分を以下のようにb()と略記することもできます（Vue.jsに限りません）。ブラウザの互換性にご注意ください。
b() {
return /\bWIP\b/i.test(this.a)
},
- MDN: メソッド定義
- ECMAScript 互換性テーブル -- 少々見つけにくいのですが、Syntax > shorthand properties > shorthand methodsの行です（下図）。
バックナンバー（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）パスワードを入力中だけ表示する