・v-model修飾子はどう使う？
こんな疑問にお答えします。
Vue.jsで使うv−modelディレクティブは、修飾子を使うことで動作を変えることが可能です。
修飾子は複数あります。
今回は自分用のメモとしてまとめてみました！
参考にどうぞ！
ということで、この記事では「Vue.jsのv-model修飾子の種類と使い方」について解説していきます！
・Vue.jsのv-model修飾子の種類
・Vue.jsのv-model修飾子の使い方
【解説】Vue.jsのv-modelの使い方【サンプルコードあり】 目次
【解説】Vue.jsのv-model修飾子の種類
「v-model」の修飾子には、下記があります。
| .lazy | バインドするタイミングの遅延 |
| .trim | 先頭と最後尾の空白削除して代入 |
| .number | 数値型に変換して代入 |
後ほど順に解説していきますね。
修飾子の使い方は、v-modelの末尾に「.~~」のように記述します。
例として下記ですね↓
v-model.lazy=""【解説】Vue.jsのv-model修飾子【.lazy】
まず修飾子「.lazy」について紹介していきます。
「.lazy」はバインドするタイミングを遅延させるのが特徴です。
通常v-modelを用いて双方向データバインディングをしたとき、文字を入力中にバインドされますよね。
（日本語変換が必要なときは、変換後にバインドされますが）
ただ「.lazy」を使うと、Enterキーやtabキーをクリックして確定されたときにバインドされます。
ようはイベントのchangeが発火した瞬間にバインドされるということ
「.lazy」を使ったサンプルを作ってみました。
See the Pen vue v-model修飾子① by jito-coder (@jito-coder) on CodePen.
Enterキーやtabキーをクリックした時に、バインドされますよね。
<div id="app">
<!-- .lazy -->
<input type="text" v-model.lazy="message">
<!-- 出力用 -->
<p>値は：{{ message }}</p>
</div>const app = Vue.createApp({
data: () => ({
message: 'おはようございます'
})
}).mount('#app')【解説】Vue.jsのv-model修飾子【.trim】
続いて修飾子「.trim」について紹介していきます。
「.trim」は先頭と最後尾の空白を削除して代入するのが特徴です。
つまり下記のように空白をなくしてくれます。
入力部分
↓
「 おはようございます 」
バインド部分
↓
「おはようございます」実際に「.trim」を使ったサンプルを作成してみました。
See the Pen vue v-model修飾子② by jito-coder (@jito-coder) on CodePen.
先頭と最後尾に空白を入れて試してみてください。
バインドされる部分には空白がなくなりますよね。
<div id="app">
<!-- .trim -->
<input type="text" v-model.trim="message">
<!-- 出力用 -->
<p>値は：{{ message }}</p>
</div>const app = Vue.createApp({
data: () => ({
message: 'おはようございます'
})
}).mount('#app')【解説】Vue.jsのv-model修飾子【.number】
最後に修飾子「.number」について紹介していきます。
「.number」は数値型に変換して代入するのが特徴です。
実際に「.number」を使ったサンプルを作成してみました。
See the Pen vue v-model修飾子③ by jito-coder (@jito-coder) on CodePen.
入力部分に数値を入れてみてください。
ちゃんと数値型として変換されて、＋10の値が表示されますよね。
＋10の式内容などは下記をどうぞ↓
<div id="app">
<!-- .number -->
<input type="number" v-model.number="scoreNum">
<!-- 出力用 -->
<p>値は：{{ scoreNum + 10 }}</p>
</div>const app = Vue.createApp({
data: () => ({
scoreNum: 0
})
}).mount('#app')【解説】Vue.jsのv-model修飾子の種類と使い方【.lazy｜.trim｜number】：まとめ
- v−modelは修飾子を使うことで動作を変えることが可能
- 使い方はv-modelの末尾に「.~~」のように記述
- 「.lazy」はバインドするタイミングを遅延させる
- 「.trim」は先頭と最後尾の空白を削除して代入する
- 「.number」は数値型に変換して代入する
v-modelの修飾子を使う時はためしてみてね！
