Vue中如何使用v-model.trim实现输入框数据的去空格

顺亿

2026-10-13 • 👁 0人浏览过

vue 是一款流行的javascript框架，用于构建响应式的web页面。v-model是vue中最常用的指令之一，用于双向绑定数据和表单控件。而v-model.trim则是v-model的一个特殊用法，用于去除输入框中数据中的前后空格。在Vue中，我们可以使用v-model.trim指令来为表单控件实现去空格的功能。例如，我们可以为一个文本框绑定v-model.trim指令，如下所示：

在上述代码中，我们将文本框的值绑定到了一个名为“username”的data属性上，并使用v-model.trim指令实现了去空格的功能。此外，我们还定义了一个计算属性“trimmedUsername”，用于显示去空格后的用户名。需要注意的是，v-model.trim指令只能用于文本输入控件，比如和

，不适用于其它类型的表单控件。
另外，我们还可以在组件中为各种表单控件添加v-model.trim指令，实现去空格的功能。例如，在下面的组件中，我们将多个文本框的值绑定到同名的data属性上，并使用v-model.trim指令实现了去空格的功能：
Vue-router参考手册
Vue-router参考手册下载
下载
立即学习
“
前端免费学习笔记（深入）
”；
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><template>
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" v-model.trim="username">
    <p>去空格后的用户名：{{ trimmedUsername }}</p>
    <label for="password">密码：</label>
    <input type="password" id="password" v-model.trim="password">
    <p>去空格后的密码：{{ trimmedPassword }}</p>
  </div>
</template>

<nav class="cxy-article-nav" aria-label="文章导航">

<a href="https://www.vqhf.com/article/22936.html" class="cxy-article-nav-link cxy-article-nav-prev">
                                    <span>‹</span>
                                    <div>
                                        <div class="cxy-article-nav-label">上一篇</div>
                                        <div class="cxy-article-nav-title">解决 JavaScript 中 HTML 输入框值传递导致随机数越界的问题</div>
                                    </div>
                                </a>

<a href="https://www.vqhf.com/article/22946.html" class="cxy-article-nav-link cxy-article-nav-next">
                                    <div>
                                        <div class="cxy-article-nav-label">下一篇</div>
                                        <div class="cxy-article-nav-title">如何在HTML5中通过TextDetector从营业执照照片中提取关键文字信息</div>
                                    </div>
                                    <span>›</span>
                                </a>

</nav>
                        </div>
                    </article>

<section class="cxy-content-section" style="margin-top: 20px;">
                        <h2 class="cxy-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="cxy-article-list">

<li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/22936.html" class="cxy-article-link">解决 JavaScript 中 HTML 输入框值传递导致随机数越界的问题</a>
                                <div class="cxy-article-meta">2026-10-13</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/22870.html" class="cxy-article-link">在bootstrap+jquery中引入文件报错（详细教程）</a>
                                <div class="cxy-article-meta">2026-10-13</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/22869.html" class="cxy-article-link">如何在Less中实现CSS字体族群的变量化管理_统一定义font-family</a>
                                <div class="cxy-article-meta">2026-10-13</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/22867.html" class="cxy-article-link">将列表中的字典转换为值字符串列表</a>
                                <div class="cxy-article-meta">2026-10-13</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/22864.html" class="cxy-article-link">HTML5选择器技巧：节省网页开发时间的秘籍</a>
                                <div class="cxy-article-meta">2026-10-13</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/22863.html" class="cxy-article-link">windows phone app 添加启动页面介绍新功能_html/css_WEB-ITnose</a>
                                <div class="cxy-article-meta">2026-10-13</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/22946.html" class="cxy-article-link">如何在HTML5中通过TextDetector从营业执照照片中提取关键文字信息</a>
                                <div class="cxy-article-meta">2026-10-13</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/22959.html" class="cxy-article-link">如何通过HTML的D3.js的select和bindData模式实现数据驱动的DOM更新</a>
                                <div class="cxy-article-meta">2026-10-13</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/22962.html" class="cxy-article-link">javascript中获取下个月一号，是星期几_时间日期</a>
                                <div class="cxy-article-meta">2026-10-13</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/22976.html" class="cxy-article-link">HTML  元素：嵌套内容与交互行为解析</a>
                                <div class="cxy-article-meta">2026-10-13</div>
                            </li>

</ul>
                    </section>
                </div>

<aside class="cxy-sidebar cxy-sidebar-right" aria-label="侧边栏">
    
    <div class="cxy-widget">
        <h3 class="cxy-widget-title">推荐阅读</h3>
        <div class="cxy-recommend-grid">

<a href="https://www.vqhf.com/article/22976.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="HTML  元素：嵌套内容与交互行为解析">
                </div>
                <div class="cxy-recommend-title">HTML  元素：嵌套内容与交互行为解析</div>
            </a>
    
            <a href="https://www.vqhf.com/article/22962.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="javascript中获取下个月一号，是星期几_时间日期">
                </div>
                <div class="cxy-recommend-title">javascript中获取下个月一号，是星期几_时间日期</div>
            </a>
    
            <a href="https://www.vqhf.com/article/22959.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="如何通过HTML的D3.js的select和bindData模式实现数据驱动的DOM更新">
                </div>
                <div class="cxy-recommend-title">如何通过HTML的D3.js的select和bindData模式实现数据驱动的DOM更新</div>
            </a>
    
            <a href="https://www.vqhf.com/article/22946.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="如何在HTML5中通过TextDetector从营业执照照片中提取关键文字信息">
                </div>
                <div class="cxy-recommend-title">如何在HTML5中通过TextDetector从营业执照照片中提取关键文字信息</div>
            </a>

</div>
    </div>

<div class="cxy-widget">
        <h3 class="cxy-widget-title">最新文章</h3>
        <ul class="cxy-article-list">

<li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/22976.html" class="cxy-article-link">HTML  元素：嵌套内容与交互行为解析</a>
                <div class="cxy-article-meta">2026-10-13</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/22962.html" class="cxy-article-link">javascript中获取下个月一号，是星期几_时间日期</a>
                <div class="cxy-article-meta">2026-10-13</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/22959.html" class="cxy-article-link">如何通过HTML的D3.js的select和bindData模式实现数据驱动的DOM更新</a>
                <div class="cxy-article-meta">2026-10-13</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/22946.html" class="cxy-article-link">如何在HTML5中通过TextDetector从营业执照照片中提取关键文字信息</a>
                <div class="cxy-article-meta">2026-10-13</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/22938.html" class="cxy-article-link">Vue中如何使用v-model.trim实现输入框数据的去空格</a>
                <div class="cxy-article-meta">2026-10-13</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/22936.html" class="cxy-article-link">解决 JavaScript 中 HTML 输入框值传递导致随机数越界的问题</a>
                <div class="cxy-article-meta">2026-10-13</div>
            </li>

</ul>
    </div>

<div class="cxy-widget">
        <h3 class="cxy-widget-title">热门标签</h3>
        <div class="cxy-article-tag-list">

<a href="https://www.vqhf.com/tag/19392" class="cxy-article-tag-item">trim</a>
    
            <a href="https://www.vqhf.com/tag/17930" class="cxy-article-tag-item">v-model</a>
    
            <a href="https://www.vqhf.com/tag/2657" class="cxy-article-tag-item">vue</a>

</div>
    </div>
</aside>
            </div>
        </div>
    </main>

<footer class="cxy-footer">
        <div class="cxy-container">
            <div class="cxy-footer-links" style="justify-content: center;">
                
                
                <a href="https://www.vqhf.com/22.html" class="cxy-footer-link">免责声明</a>
                
                <a href="https://www.vqhf.com/23.html" class="cxy-footer-link">关于我们</a>
                
                <a href="https://www.vqhf.com/24.html" class="cxy-footer-link">联系我们</a>
                
                <a href="https://www.vqhf.com/25.html" class="cxy-footer-link">投诉删除</a>
                
                <a href="https://www.vqhf.com/26.html" class="cxy-footer-link">投稿须知</a>
                
                
            </div>
            <div class="cxy-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 趣航编程网
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025063733号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

<button class="cxy-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>

<script src="https://www.vqhf.com/static/v0/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
<script>
(function() {
  var al = document.createElement("script");
  al.src = "/api/log?action=views&code=200&id=22938&path=http%3A%2F%2Fwww.vqhf.com%2Farticle%2F22938.html&type=archive&nonce="+Date.now();
  document.body.appendChild(al);
})();
</script>

</html>