javascript - Vue js 过滤替换违禁词

Question

在本例中，我们要过滤输入中的单词:

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

这些是我们要从输入中替换的禁用词

"banned", "apple", "banana",

Answer 1

这是我们的 vue 实例。观察者将禁止的单词替换为星号(*)

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

<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>