Vue 3 v-model 指令详解：双向数据绑定的艺术

在 Vue.js 中，v-model 指令是实现表单输入和数据绑定的重要工具。它简化了父子组件之间的数据同步过程，使得开发人员可以更加专注于业务逻辑而非繁琐的属性和事件绑定。本文将深入探讨 Vue 3 中的 v-model 指令，包括其用法、原理以及高级技巧。

v-model 指令简介

v-model 指令在 Vue 2 和 Vue 3 中都有使用，但在 Vue 3 中，其实现方式有所变化。v-model 实际上是一个语法糖，它结合了 v-bind 和 v-on 指令。在 Vue 3 中，v-model 通常用于在表单元素（如 、</code>、<code><select></code>）和自定义组件之间实现双向数据绑定。</p><p style="text-align: center;"><img src="https://img.pic99.top/cnyincai/202501/857c77d496c8402.png" data-original="https://blog.yyzq.team/zb_users/upload/cover/20241026/7db9edca911c52e7873f87be7234954c.jpg" class="lazyload" alt="vue3的v-model" /></p> <h2>Vue 3 中 v-model 的用法</h2> <h3>1. 基本用法</h3> <p>在 Vue 3 中，你可以在任何组件上使用 v-model 来实现双向数据绑定。以下是一个简单的例子：</p> <pre><code class="language-html"><template> <input v-model="message" /> </template> <script> import { ref } from 'vue'; export default { setup() { const message = ref(''); return { message }; } }; </script></code></pre> <p>在上面的例子中，<code>message</code> 是一个响应式引用（ref），其值会随着输入框内容的改变而更新。</p> <h3>2. 使用 defineModel()</h3> <p>从 Vue 3.4 版本开始，推荐使用 <code>defineModel()</code> 宏来在自定义组件中实现 v-model。以下是如何在子组件中使用 <code>defineModel()</code> 的例子：</p> <pre><code class="language-html"><!-- Child.vue --> <script setup> const modelDefineModel(); const value = defineProps(['modelValue']); const emit = defineEmits(['update:modelValue']); function update(value) { emit('update:modelValue', value); } </script> <template> <input :value="value" @input="update($event.target.value)" /> </template></code></pre> <p>在父组件中，你可以这样使用：</p> <pre><code class="language-html"><template> <child v-model="message" /> </template> <script> import { ref } from 'vue'; import Child from './Child.vue'; export default { setup() { const message = ref(''); return { message, Child }; } }; </script></code></pre> <h3>3. 处理 v-model 修饰符</h3> <p>v-model 指令支持修饰符，例如 <code>.lazy</code>、<code>.number</code> 和 <code>.trim</code>。这些修饰符可以改变 v-model 的行为：</p> <ul> <li><code>.lazy</code>：当输入事件停止触发时（如失去焦点），才更新数据。</li> <li><code>.number</code>：将输入值转换为数值类型。</li> <li><code>.trim</code>：自动去除输入值的首尾空格。</li> </ul> <pre><code class="language-html"><input v-model.number="numberValue" /> <input v-model.trim="textValue" /></code></pre> <h2>总结</h2> <p>Vue 3 的 v-model 指令提供了强大的双向数据绑定能力，使得组件间的数据同步变得简单高效。通过使用 <code>defineModel()</code> 宏和修饰符，你可以根据实际需求定制 v-model 的行为。掌握 v-model 的使用技巧，将有助于你构建更加灵活和高效的 Vue 应用程序。</p> <!--end::Text--> </div> <!--end::Description--> <div class="mt-5"> <!--关键词搜索--> </div> <div class="mt-5"> <p class="fc-show-prev-next"> <strong>上一篇：</strong><a href="/shangye/show-720055.html">上大学一定要办校园卡吗 </a><br> </p> <p class="fc-show-prev-next"> <strong>下一篇：</strong><a href="/shangye/show-720060.html">办校园卡宽带是什么意思啊 </a> </p> </div> <!--begin::Block--> <div class="d-flex flex-stack mb-2 mt-10"> <!--begin::Title--> <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3> <!--end::Title--> </div> <div class="separator separator-dashed mb-9"></div> <!--end::Block--> <div class="row g-10"> </div> </div> <!--end::Table widget 14--> </div> <!--end::Col--> <!--begin::Col--> <div class="col-xl-4 mt-0"> <!--begin::Chart Widget 35--> <div class="card card-flush h-md-100"> <!--begin::Header--> <div class="card-header pt-5 "> <!--begin::Title--> <h3 class="card-title align-items-start flex-column"> <!--begin::Statistics--> <div class="d-flex align-items-center mb-2"> <!--begin::Currency--> <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span> <!--end::Currency--> </div> <!--end::Statistics--> </h3> <!--end::Title--> </div> <!--end::Header--> <!--begin::Body--> <div class="card-body pt-3"> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735292.html" class="text-dark fw-bold text-hover-primary fs-6">北京北实纵横科技发展有限公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">北京北实纵横科技发展有限公司是一家，注册资本为1万，所在地区位于北京东城区,主营产品或服务为各种生化...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735290.html" class="text-dark fw-bold text-hover-primary fs-6">亿贸集团化工股份有限公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">*从事化工原料、化学试剂、通用化学溶剂、试剂、基准试剂、生化试剂、染色指示剂、高纯试剂,销售为一体的...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735291.html" class="text-dark fw-bold text-hover-primary fs-6">上海迦百农阀门制造有限公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">上海迦百农阀门制造有限公司系ISO9001-2000国际质量管理体系认证企业。联合国内多家同行及引进...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735288.html" class="text-dark fw-bold text-hover-primary fs-6">山东淄博制釉有限公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">山东淄博制釉公司,座落在世界短篇小说之王蒲松龄的故乡淄川,丰富的资源,地理位置优越,提供了良好的生产...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735289.html" class="text-dark fw-bold text-hover-primary fs-6">杭州诺盾过滤机械有限公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">杭州诺盾过滤机械有限公司是一家设备齐全，技术工艺先进，实力雄厚，检测手段健全，产品质量优良的过滤、分...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735282.html" class="text-dark fw-bold text-hover-primary fs-6">佛山市乘龙炉业有限公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">佛山市乘龙炉业有限公司是一家由一批多年从事工业炉设计制造及从事销售工作的资深人员组成。是一家从事氮化...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735280.html" class="text-dark fw-bold text-hover-primary fs-6">吉林欧伊尔环保科技发展有限公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">吉林欧伊尔环保科技发展有限公司是由吉林市科技开发实业公司改制重组而成，是集营销、生产、研发于一体的高...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735279.html" class="text-dark fw-bold text-hover-primary fs-6">河北省冀州市中意复合材料有限公...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">河北省冀州市中意复合材料有限公司（前身为冀州市中意玻璃钢厂）1986年引进意大利VETRORESIN...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735278.html" class="text-dark fw-bold text-hover-primary fs-6">绵阳世诺科技有限公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">绵阳市世诺科技有限公司是四川省高新技术企业，由创业团队共同组建，按现代企业制度成立的民营高科技自动化...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735275.html" class="text-dark fw-bold text-hover-primary fs-6">北京利奇世纪商贸有限公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">北京利奇世纪商贸有限公司是一家集生产加工、经销批发的私营有限责任公司，柠檬酸、、碳酸氢钠、纯碱、、消...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735276.html" class="text-dark fw-bold text-hover-primary fs-6">成都双江化工有限公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">成都双江化工有限公司是近十年发展起来的新型企业。公司拥有雄厚的技术力量，齐全的生产设备和化验装置，本...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735277.html" class="text-dark fw-bold text-hover-primary fs-6">德国福林FRING进口阀门有限...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">德国福林水工业集团成立于1968年，是*生产个类水工业产品及提供整体解决方案的跨国性工业集团，其生产...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735269.html" class="text-dark fw-bold text-hover-primary fs-6">“金诺”PEX交联聚乙烯管</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">更多 重庆民生机电设备成套有限公司位于重庆市的政治金融、商业中心，紧邻市人民政府，...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735268.html" class="text-dark fw-bold text-hover-primary fs-6">吉林市神舟炭纤维有限责任公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">本公司主要产品有聚丙烯腈基碳纤维、碳纤维编织布、碳纤维粉等；产品以其优异的性能，广泛应用于航天、航空...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735267.html" class="text-dark fw-bold text-hover-primary fs-6">河北虎跃化工设备安装有限公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">河北虎跃化工设备安装有限公司，成立于2009年。经营范围为制药、化工、食品行业的工艺设计及其设备的设...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735266.html" class="text-dark fw-bold text-hover-primary fs-6">上海弗雷西阀门有限公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">弗雷西阀门起源于意大利罗马，传承了欧洲的优良工艺和品质，本着“品质至上”的原则，致力于为客户提供更完...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735265.html" class="text-dark fw-bold text-hover-primary fs-6">明洋有机玻璃</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">明洋有机玻璃是一家，注册资本为1万，我们以诚信、实力和质量获得业界的高度认可，坚持以客户为核心，“质...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735263.html" class="text-dark fw-bold text-hover-primary fs-6">金湖县环宇化工有限公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">　金湖县环宇化工有限公司位于江苏省淮安市金湖县,是集科研、开发、生产、经营为一体的科技型民营化工企业...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735264.html" class="text-dark fw-bold text-hover-primary fs-6">南京绿怡居环保科技有限公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">南京绿怡居环保科技有限公司是一家，注册资本为1万，所在地区位于江苏南京市,主营产品或服务为各种硅藻土...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/shangye/show-735259.html" class="text-dark fw-bold text-hover-primary fs-6">南京市强盛化工贸易有限公司</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">南京市强盛化工贸易有限公司是一家，注册资本为1万，所在地区位于江苏南京市,我们以诚信、实力和质量获得...</span> </div> <!--end::Title--> </div> </div> <!--end::Body--> </div> <!--end::Chart Widget 35--> </div> <!--end::Col--> </div> </div> <!--end::Content container--> </div> <!--end::Content--> </div> <!--end::Content wrapper--> <!--begin::Footer--> <div id="kt_app_footer" class="app-footer"> <!--begin::Footer container--> <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3"> <!--begin::Copyright--> <div class="text-dark order-2 order-md-1"> <span class="text-muted fw-semibold me-1">2025 ©</span> 华商网 <a href="http://tousu.huashangw.com/">商务投诉</a><a href="http://cn.huashangw.com/">华商生活网</a><a href="http://yule.huashangw.com/">华商娱乐网</a><a href="http://ask.bgjj.cc/">布谷问答网</a><a href="http://www.huixiwan.com">显密文库</a>a href="http://dianzi.huashangw.com/">华商电子网</a> </div> <!--end::Copyright--> <!--begin::Menu--> <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1"> <li class="menu-item"> <a href="/news/" target="_blank" class="menu-link px-2">资讯</a> </li> <li class="menu-item"> <a href="/minsheng/" target="_blank" class="menu-link px-2">民生</a> </li> <li class="menu-item"> <a href="/zhishi/" target="_blank" class="menu-link px-2">知识</a> </li> <li class="menu-item"> <a href="/shangye/" target="_blank" class="menu-link px-2">商业</a> </li> </ul> <!--end::Menu--> </div> <!--end::Footer container--> </div> <!--end::Footer--> </div> <!--end:::Main--> </div> <!--end::Wrapper--> </div> <!--end::Page--> </div> <!--end::App--> <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true"> <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg--> <span class="svg-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect> <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path> </svg> </span> <!--end::Svg Icon--> </div> <!--begin::Javascript--> <script>var hostUrl = "/static/default/pc/";</script> <!--begin::Global Javascript Bundle(mandatory for all pages)--> <script src="/static/default/pc/plugins/global/plugins.bundle.js"></script> <script src="/static/default/pc/js/scripts.bundle.js"></script> <!--end::Global Javascript Bundle--> <!--end::Javascript--> </body> <!--end::Body--> </html>