在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

根据文档

如果您希望自动修剪用户输入中的空格，您可以将修剪修饰符添加到 v-model 管理的输入中

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

如果您仍有任何疑问，请查看此演示。

如果您在 中查找空格view(html)，浏览器会忽略空格，请尝试在控制台中检查。

Answer 2

在Javascript中，.trim()是一个String方法，用于删除字符串开头和结尾的空格，因此相同的行为也适用于v-model