vuejs2 - 在 Vue 中，v-model.trim 的用途是什么

Question

我是 Vue 新手，学习过 v-model 指令。为了测试 v-model.trim 做了什么，我编写了以下代码。

<template>
<p>Hello {{ myName }}</p>
<form>Name: <input type="text" v-model.trim="myName"/></form>
</template>

<script>
export default {
  data(){
    return{
      myName: "",
    };
  },
};
</script>

当我输入 "B o b" 时，输出是 "B o b"。但是，我发现即使我不使用 v-model.trim 而只是按如下方式使用 v-model

<template>
<p>Hello {{ myName }}</p>
<form>Name: <input type="text" v-model="myName"/></form>
</template>

<script>
export default {
  data(){
    return{
      myName: "",
    };
  },
};
</script>

它给出了完全相同的输出。.trim 的用途是什么？

Answer 1

根据 docs

If you want whitespace from user input to be trimmed automatically, you can add the trim modifier to your v-model-managed inputs

v-model.trim="msg" 等于执行 msg = msg.trim() 删除输入前后的空格。

检查这个demo如果您还有任何疑问。

如果您在view(html) 中寻找空格，浏览器ignores空白区域，尝试检查控制台。