Vue.js v-model時に入力した文字前後にある空白を除去する
環境
Windows 10 Home 64bit
Vue.js 5.0.8
Google Chrome 108.0.5359.125(Official Build) (64 ビット)
yarn 1.22.19
構文
v-model.trim="val"
return {
val: "
}
「v-model.trim」を使用してv-model時に前後にある空白を除去します。
使用例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>v-model時に前後にある空白を除去するサンプル</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app" > <input v-model.trim="val" type="text"> </div> <script> const res = { data() { return { val: '' } } } Vue.createApp(res).mount('#app') </script> </body> </html>
実行結果
テキストフォームに「 arkgame 」を入力して、前後の空白が除去されます。