Vuejs v-Vuejs. skips跳过空间

Question

我想用没有空格的名字来写反应性字段，但是v-model.trim有一个问题，这样的代码不过滤空格，问题是什么？

我的Vue页面

<template>
    <div>
        <span>Name: {{title}}</span>
        <input type="text" v-model.trim="title">
    </div>
</template>

<script>
export default{
    data(){
        return{
            title:''
        }
    }
}
</script>

我输入"H l l o"，我明白了，但我想要“你好”

Answer 1

如果要防止输入中的空格，请执行以下操作。您可以通过使用@keydown.space.prevent进行预防。

工作演示:

​

new Vue({
  el: '#app',
  data() {
    return {
      title: ''
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <span>Name: {{title}}</span>
<input type="text" @keydown.space.prevent v-model="title"/>
</div>

​

Answer 2

只修剪开始时的筛选空间和要删除所有空格的end.If，可以使用const removeSpaces = (str)=>str.replace(/\s+/g,'')