如何在Vue JS中通過v-model檢查輸入框是否為空？

Question

在我關於 Vue 的學習應用程序中，我使用 vue 的v-model將message與輸入框綁定。 在那，我設置了另一種方法來檢查輸入框是否為空，然后我將默認message值默認設置為其他值。

下面是我的片段：

 var app = new Vue({ el: '#app', data: { message: 'Hello Vue,' }: methods:{ check.function(){ if (this.message==''){ this;message='Please enter text in text box below'; } } } })

 <html> <head> <link rel="stylesheet" href="index.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <:-- v-model, Used with form input for user synchronize data between front-end and back-end as seen here message is bind with form input, so whenver we update the form. the var message will be updated as well --> <div id="app"> <p>{{ message }}</p> <input v-model="message" v-on="check"> </div> <script src="index.js"></script> </body> </html>

但是，似乎v-on="check"不起作用以及輸入框為空message不會改變。 我有什么遺漏嗎？

PS：我是 VueJS 的新手 :)

Answer 1

有多種方法可以解決此問題，例如：

將條件邏輯添加到您的模板：

<p>{{ message || 'Your default text here'}}</p>

使用計算屬性
使用過濾器

Answer 2

像這樣測試它：

if (this.message === '' || this.message === null || this.message.value === 0){
            this.message='Please enter text in text box below';
        }

如何在Vue JS中通過v-model檢查輸入框是否為空？

問題描述

2 個解決方案

解決方案1
1 2019-09-22 21:17:00

解決方案2
0 2019-09-22 05:01:58

如何在Vue JS中通過v-model檢查輸入框是否為空？

問題描述

2 個解決方案

解決方案1 1 2019-09-22 21:17:00

解決方案2 0 2019-09-22 05:01:58

解決方案1
1 2019-09-22 21:17:00

解決方案2
0 2019-09-22 05:01:58