`v-model` 是 Vue.js 中的一个非常强大的指令，它主要用于在表单输入和应用状态之间创建双向数据绑定。这意味着，当用户在表单输入中修改数据时，绑定的数据会自动更新；反之，当绑定的数据变化时，输入也会相应地更新。 ### 基本原理 `v-model` 实际上是一个语法糖，它背后做了几件事情来实现双向绑定： 1. **监听 input 事件**：`v-model` 会根据控件类型自动选取正确的方法来更新元素。对于 ``, ``, 和 ``，它默认使用 `value` 属性作为 prop，并监听 `input` 事件来更新数据。 2. **更新数据**：当在表单控件上触发 `input`（或其他类似事件，如 `change` 对于 `<select>`）时，`v-model` 会将新的值赋给绑定的数据属性。 3. **渲染视图**：由于 Vue 的响应式系统，当绑定的数据发生变化时，视图会自动更新以反映最新的数据。 ### 自定义组件中的 v-model 在自定义组件中，`v-model` 同样可以工作，但需要组件显式地定义如何接收 prop 和触发事件。默认情况下，`v-model` 使用 `value` 作为 prop 和 `input` 作为事件，但你可以通过 `model` 选项来自定义它们： ```javascript Vue.component('custom-input', { props: ['value'], model: { prop: 'customValue', event: 'customInput' }, methods: { updateValue(e) { this.$emit('customInput', e.target.value); } }, template: ` <input :value="customValue" @input="updateValue" type="text" > ` }); ``` 在这个例子中，虽然模板中使用了 `:value="customValue"` 和 `@input="updateValue"`，但由于 `model` 选项的指定，使用 `<custom-input v-model="something">` 时，实际上绑定的是 `customValue` prop，并在内部 `updateValue` 方法中通过 `$emit('customInput', ...)` 触发更新。 ### 注意事项 - 并非所有表单输入都触发 `input` 事件。例如，对于 `<select multiple>`，你可能需要监听 `change` 事件。 - 在自定义组件中，确保你正确处理了 prop 和事件的传递，以便 `v-model` 能够正常工作。 - Vue 3 引入了 Composition API，其中可以使用 `ref` 或 `reactive` 来创建响应式数据，并通过 `watch` 或 `computed` 来实现更复杂的逻辑，但 `v-model` 的基本工作原理保持不变。 </div> </div> </article> </div> <!-- 内容 end --> <style> /* 选择ul元素，将li的样式设置为短横线 */ ul.custom-list { list-style-type: none; /* 移除默认的圆点 */ padding-left:2px; } ul.custom-list li { padding-left: 20px; /* 添加一些内边距，为自定义短横线留出空间 */ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><line x1="0" y1="5" x2="10" y2="5" stroke="black" stroke-width="2"/></svg>'); /* 使用SVG绘制短横线 */ background-repeat: no-repeat; /* 防止短横线重复 */ background-position: left center; /* 将短横线定位到左侧中间 */ } .rec-li a{ color: #1677ff; } .pdf-title { padding-top: 15px; } .pdf-title svg { color: #f60; margin-top: -5px; } </style> <div class="row"> <div class="col-xl-12"> <div class=""> <div class="row"> <h5 class="pdf-title col-md-12"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-book-half" viewBox="0 0 16 16"> <path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/> </svg> 推荐文章 </h5> </div> <div class=""> <ul class="custom-list"> <li class="rec-li"> <a href="/article/6045.html" target="_blank">Shopify 如何为促销活动设置基于地理位置的优惠？</a> </li> <li class="rec-li"> <a href="/article/9669.html" target="_blank">如何在 Java 中限制线程的最大并发数？</a> </li> <li class="rec-li"> <a href="/article/5112.html" target="_blank">Shopify 如何为客户启用个性化的问卷调查功能？</a> </li> <li class="rec-li"> <a href="/article/9983.html" target="_blank">如何用 Python 编写爬虫并处理动态内容？</a> </li> <li class="rec-li"> <a href="/article/3035.html" target="_blank">Spring Boot与Spring Cloud的集成</a> </li> <li class="rec-li"> <a href="/article/858.html" target="_blank">ChatGPT：改变人机交互方式的语言模型革命</a> </li> <li class="rec-li"> <a href="/article/2561.html" target="_blank">MongoDB专题之-MongoDB的备份验证：数据一致性的检查</a> </li> <li class="rec-li"> <a href="/article/5426.html" target="_blank">Shopify 如何为产品添加详细的规格表展示？</a> </li> <li class="rec-li"> <a href="/article/2323.html" target="_blank">Python高级专题之-Python与金融量化交易：Backtrader</a> </li> <li class="rec-li"> <a href="/article/2200.html" target="_blank">PHP高级专题之-异步编程与协程在PHP的应用</a> </li> <li class="rec-li"> <a href="/article/5967.html" target="_blank">Shopify 主题如何使用 Section 和 Block 创建动态布局？</a> </li> <li class="rec-li"> <a href="/article/6541.html" target="_blank">ChatGPT 能否为科技公司生成个性化的创新项目计划？</a> </li> <li class="rec-li"> <a href="/article/629.html" target="_blank">详细介绍Python函数的不定长参数</a> </li> <li class="rec-li"> <a href="/article/7755.html" target="_blank">AIGC 模型生成的社交媒体广告如何根据用户点击率优化？</a> </li> <li class="rec-li"> <a href="/article/7777.html" target="_blank">AIGC 生成的产品使用指南如何根据用户反馈进行优化？</a> </li> <li class="rec-li"> <a href="/article/9131.html" target="_blank">Java 中的 Reactive Programming 如何实现？</a> </li> <li class="rec-li"> <a href="/article/6349.html" target="_blank">ChatGPT 能否帮助生成跨平台的用户交互优化方案？</a> </li> <li class="rec-li"> <a href="/article/1932.html" target="_blank">100道Java面试题之-什么是Java中的JNDI（Java Naming and Directory Interface）？它有什么作用？</a> </li> <li class="rec-li"> <a href="/article/3101.html" target="_blank">Spring Cloud专题之-Spring Cloud与Service Mesh的集成</a> </li> <li class="rec-li"> <a href="/article/7941.html" target="_blank">如何用 AIGC 自动生成用户评论分析报告？</a> </li> <li class="rec-li"> <a href="/article/3070.html" target="_blank">Spring Boot的配置中心：Spring Cloud Config</a> </li> <li class="rec-li"> <a href="/article/2321.html" target="_blank">Python高级专题之-使用PyVista进行3D数据可视化</a> </li> <li class="rec-li"> <a href="/article/1715.html" target="_blank">详细介绍PHP 如何实现邮件队列？</a> </li> <li class="rec-li"> <a href="/article/2146.html" target="_blank">100道Go语言面试题之-在Go中，如何实现一个自定义的日志系统？请提及可能的实现方式和技术。</a> </li> <li class="rec-li"> <a href="/article/7902.html" target="_blank">AIGC 生成的内容如何根据用户点击率进行优化？</a> </li> <li class="rec-li"> <a href="/article/5246.html" target="_blank">如何在 Magento 中实现用户的社交登录功能？</a> </li> <li class="rec-li"> <a href="/article/4636.html" target="_blank">如何为 Magento 创建自定义的营销活动报告？</a> </li> <li class="rec-li"> <a href="/article/7602.html" target="_blank">AIGC 在生成新闻内容时如何确保新闻真实性？</a> </li> <li class="rec-li"> <a href="/article/2501.html" target="_blank">Redis专题之-Redis与数据一致性：CAP理论与实践</a> </li> <li class="rec-li"> <a href="/article/7973.html" target="_blank">如何在 AIGC 生成内容中控制词汇复杂性？</a> </li> </ul> </div> </div> </div> </div> </div> </div> </main> <footer class="" style="padding-bottom: 10px;"> <div class="w-100"> <div class="part1" style="text-align: center;"> <span>码小课网站聚焦前端、后端、大数据等领域，是国内领先的服务IT技术人员的专业性服务平台。</span> <span>为程序员提供多种学习形式，包含：</span> <span><a href="https://www.maxiaoke.com">技术小册</a>，</span> <span><a href="https://www.maxiaoke.com">视频课程</a>，</span> <span><a href="https://www.maxiaoke.com">PDF书籍</a>，</span> <span><a href="https://www.maxiaoke.com">技术文章</a>，</span> <span><a href="https://www.maxiaoke.com">面试刷题</a></span> <span>等多种学习资源，帮助程序员快速成长。</span> </div> <div class="part2" style="text-align: center;"> <span>Copyright © 1998-2023 maxiaoke.com All rights reserved.　|　</span> <span>京ICP备15061182号-3　|</span> <span><a href="/help.html" class="px-2">帮助中心　|</a></span> <span><a href="/statement.html" class="px-2">隐私声明　|</a></span> <span><a href="/aboutus.html" class="px-2">关于我们</a></span> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7c1809c87414f60f4952584894462bae"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script type="text/javascript" src="/static/js/popper.min.js"></script> <script type="text/javascript" src="/static/js/bootstrap.min.js"></script> <script type="text/javascript" src="/static/js/app.min.js"></script><script type="text/javascript" src="/index/js/site.min.js"></script> <script> $(function(){ $("#logout").click(function(){ var host= "https://www.maxiaoke.com"; var url = host + '/user/login/logout'; $.post(url,{},function(data){ window.location.href=host; },'json'); }) }) </script> </body> </html>