過濾器和更換禁用詞語的Vue JS

Question

在這種情況下，我們希望在我們的輸入來過濾的話：

<input type="text" class="form-control" placeholder="Write something..." v-model="todoInput"">

這些都是我們想從輸入取代禁用詞語

「禁止」， 「蘋果」， 「香蕉」，

Answer 1

這裏是我們的VUE實例。觀察者替換禁止字星號（*）

const app = new Vue({ 
 
    el: '#app', 
 
    data: function(){ 
 
    \t return { 
 
    \t \t todoInput : '', 
 
    \t } 
 
    }, 
 
    watch: { 
 
    \t todoInput: function(){ 
 
    \t \t var banned = ["banned", "apple", "banana"] 
 
    \t \t for (var i = 0; i < banned.length; i++) { 
 
    \t \t \t if (this.todoInput.includes(banned[i])) { 
 
\t  \t \t \t this.todoInput = this.todoInput.replace(banned[i], "*".repeat(banned[i].length)) //sets the input to * times the length of the banned word 
 
\t  \t \t } 
 
    \t \t } 
 
    \t } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 

 
<div id="app"> 
 

 
    <input type="text" class="form-control" 
 
      placeholder="Write something..." 
 
      v-model="todoInput"> 
 

 
</div>