title: In Vue, what is the purpose of v-model.trim
body: <p>I am new to Vue and have learned <code>v-model</code> directive.
  To test what <code>v-model.trim</code> does I wrote the following code.</p>
  <pre><code>&lt;template&gt;
  &lt;p&gt;Hello {{ myName }}&lt;/p&gt;
  &lt;form&gt;Name: &lt;input type=&quot;text&quot; v-model.trim=&quot;myName&quot;/&gt;&lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data(){
      return{
        myName: &quot;&quot;,
      };
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>When I typed in <code>&quot;      B         o         b&quot;</code> the output was <code>&quot;B o b&quot;</code>. However, I found out that even when I don't use <code>v-model.trim</code> and just use <code>v-model</code> as follows</p>
  <pre><code>&lt;template&gt;
  &lt;p&gt;Hello {{ myName }}&lt;/p&gt;
  &lt;form&gt;Name: &lt;input type=&quot;text&quot; v-model=&quot;myName&quot;/&gt;&lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data(){
      return{
        myName: &quot;&quot;,
      };
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>it gives the exact same output.
  What is the purpose of <code>.trim</code>?</p>