, 与 v</h1> <ul class="info"> <li>作者: <a href="https://www.wusumeng.com" title="五速梦信息网" class="fgvzszb">五速梦信息网</a></li> <li>时间: 2026年03月19日 18:20</li> </ul> </div> <div class="single-arc flex ps15 bgwhite nbjrorq"> <p class="hjcbdqy">vue.js v-model 指令可以用在表单控件元素上创建双向数据绑定</p><p class="mpajmvp"><img src="http://api.fly63.com/public/Uploads/20210122/600af1b686507.png"/ class="hwdooix"><br/></p><p class="nogszd">同时 v-model 指令会根据控件类型自动选取正确的方法来更新元素</p><p class="gwuuexn"><br/></p><h2 class="mfryzci"><input>,<textarea> 与 v-model 指令</h2><p class="igqadjq">下面的代码演示了 <input> 和 <textarea> 元素中使用 v-model 实现双向数据绑定</p><p class="vdfdps"><br/></p><h3 class="gqfduji">复选框 checkbox</h3><p class="mrlkjyh">在复选框上使用 v-model 指令时，如果只有一个复选框，则绑定到一个逻辑值，如果有多个，则绑定到一个数组</p><p class="ipnlnrx">运行以上 Vue.js 范例，勾选一些复选框，显示如下</p><p class="jekvdik"><img src="http://api.fly63.com/public/Uploads/20210122/600af1f9d6c34.jpg"/ class="mebasno"><br/></p><p class="dwbewyk"><br/></p><h3 class="cskydwm">单选按钮</h3><p class="jodpzsx">在单选按钮上使用 v-model 指令时，绑定的是一个字符串</p><p class="lubhdfl">运行以上 Vue.js 范例，选中某个单选按钮，显示如下</p><p class="doufkxv"><img src="http://api.fly63.com/public/Uploads/20210122/600af2012323d.jpg"/ class="czgfvuj"><br/></p><p class="jamfiye"><br/></p><h2 class="ljesrjm">下拉列表 <select></h2><p class="jrbqjop">在下拉列表 <select> 上使用 v-model 指令时，绑定的是一个字符串</p><p class="kusmyij">运行以上 Vue.js 范例，选择某个按钮，显示如下</p><p class="fffterr"><img src="http://api.fly63.com/public/Uploads/20210122/600af205313be.jpg"/ class="cfoxtdd"><br/></p><p class="jxwzxzi"><br/></p><h2 class="knlpise">v-model 指令修饰符</h2><p class="evfxsza">v-model 指令可以添加一些修饰符</p><h3 class="cphqtaq">1. .lazy</h3><p class="kjvplwn">在默认情况下， v-model 在 input 事件中同步输入框的值与数据</p><p class="kwnbanb">但我们可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步</p><h3 class="ikshcvk">.number</h3><p class="mxyfwhe">如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值</p><p class="gjddvoy">这通常很有用，因为在 type="number" 时 html 中输入的值也总是会返回字符串类型</p><h3 class="fnmpny">.trim</h3><p class="iomdcgz">如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入</p><p class="mteydup">本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！</p> </div> <ul class="prenext bgwhite ps15"> <li> 上一篇： <a href="https://www.wusumeng.com/news/217282.html" class="ghctzin">Vue.js 样式绑定</a> </li> <li> 下一篇： <a href="https://www.wusumeng.com/news/217284.html" class="gjzdln">Angular 2 表单</a> </li> </ul> <div class="rel bgwhite ps15 ibhzjbi"> <div class="section-title miwulci"> <h2 class="hejlvqr">相关文章</h2> </div> <ul class="listblog bgwhite"> <li> <a href="https://www.wusumeng.com/news/217282.html" title="Vue.js 样式绑定" class="listblog-item nhyngch"> <div class="img bigimg box fleximg fzgvxwb"><img src="https://www.wusumeng.com/uploads/202602/17/66aabfe615d9bfc3.webp" alt="Vue.js 样式绑定" class="bmbnawd"> </div> <div class="text flex flextext hffwncm"> <h3 class="nfybnhq">Vue.js 样式绑定</h3> <p class="funqbxo">Vue.js 样式绑定</p> <ul class="info"> <li>互联网</li> <li>2026年03月19日</li> </ul> </div> </a> </li> <li> <a href="https://www.wusumeng.com/news/217281.html" title="JavaScript 用法" class="listblog-item bpvkwti"> <div class="img bigimg box fleximg hrhkmkl"><img src="https://www.wusumeng.com/uploads/202602/17/d3d514334eb8bd6a.webp" alt="JavaScript 用法" class="npfxdft"> </div> <div class="text flex flextext gfbiak"> <h3 class="ggyrdge">JavaScript 用法</h3> <p class="mtaohwg">JavaScript 用法</p> <ul class="info"> <li>互联网</li> <li>2026年03月19日</li> </ul> </div> </a> </li> <li> <a href="https://www.wusumeng.com/news/217280.html" title="Angular 2 TypeScript 环境配置" class="listblog-item iohmgoe"> <div class="img bigimg box fleximg eiikwx"><img src="https://www.twle.cn/static/i/angularjs2/setup_3.jpg" alt="Angular 2 TypeScript 环境配置" class="ghvybij"> </div> <div class="text flex flextext mwrhzxv"> <h3 class="ijmvaaz">Angular 2 TypeScript 环境配置</h3> <p class="pdtbbk">Angular 2 TypeScript 环境配置</p> <ul class="info"> <li>互联网</li> <li>2026年03月19日</li> </ul> </div> </a> </li> <li> <a href="https://www.wusumeng.com/news/217284.html" title="Angular 2 表单" class="listblog-item gvomnpm"> <div class="img bigimg box fleximg bpqefbv"><img src="https://www.wusumeng.com/uploads/202602/17/30c513c1ea178766.webp" alt="Angular 2 表单" class="fujwcbt"> </div> <div class="text flex flextext nfuoned"> <h3 class="hfaivoz">Angular 2 表单</h3> <p class="bkvlcec">Angular 2 表单</p> <ul class="info"> <li>互联网</li> <li>2026年03月19日</li> </ul> </div> </a> </li> <li> <a href="https://www.wusumeng.com/news/217285.html" title="Angular 2 用户输入" class="listblog-item fyanxqi"> <div class="img bigimg box fleximg ngrxhte"><img src="https://www.wusumeng.com/uploads/202602/17/4b50ad0a4a7d913a.webp" alt="Angular 2 用户输入" class="hddruvw"> </div> <div class="text flex flextext bbsvorx"> <h3 class="fmdcffr">Angular 2 用户输入</h3> <p class="jvqpjuc">Angular 2 用户输入</p> <ul class="info"> <li>互联网</li> <li>2026年03月19日</li> </ul> </div> </a> </li> <li> <a href="https://www.wusumeng.com/news/217286.html" title="Vue.js 初始化" class="listblog-item koailtw"> <div class="img bigimg box fleximg eynorcs"><img src="https://www.wusumeng.com/uploads/202602/17/aee0399b7c301550.webp" alt="Vue.js 初始化" class="ckdwtbw"> </div> <div class="text flex flextext jrxxfyt"> <h3 class="kssmiqj">Vue.js 初始化</h3> <p class="famurvn">Vue.js 初始化</p> <ul class="info"> <li>互联网</li> <li>2026年03月19日</li> </ul> </div> </a> </li> </ul> </div> </div> <!-- 内容 --> <!-- 侧边栏 --> <div class="sidebar flex cjioasb"> <div class="side flex bgwhite ps15 kffmryq"> <div class="side-title ldgjlgs">最新内容</div> <ul class="side-ul flex"> <li> <div class="img bigimg fleximg box jizfezv"><a href="https://www.wusumeng.com/news/485632.html" title="最小公倍数 ((LCM))" class="lxjlczx"><img src="https://www.wusumeng.com/uploads/202603/05/16ba99cf9cff4a7f.webp" alt="最小公倍数 ((LCM))" class="dpjphxr"></a></div> <div class="text flex5 flextext cwzigun"> <h3 class="list-title jidyjec"><a href="https://www.wusumeng.com/news/485632.html" title="最小公倍数 ((LCM))" class="lzitaei">最小公倍数 ((LCM))</a></h3> <ul class="info"> <li>互联网</li> <li>2026年04月04日</li> </ul> </div> </li> <li> <div class="img bigimg fleximg box dubriik"><a href="https://www.wusumeng.com/news/485631.html" title="最新 Sublime Text3 激活码 (Build 3114 有效)" class="ctgogky"><img src="https://www.wusumeng.com/uploads/202603/05/e2dc73e325d64f16.webp" alt="最新 Sublime Text3 激活码 (Build 3114 有效)" class="ivwrmbd"></a></div> <div class="text flex5 flextext lpxmdpb"> <h3 class="list-title hiyzvnw"><a href="https://www.wusumeng.com/news/485631.html" title="最新 Sublime Text3 激活码 (Build 3114 有效)" class="nbftwww">最新 Sublime Text3 激活码 (Build 3114 有效)</a></h3> <ul class="info"> <li>互联网</li> <li>2026年04月04日</li> </ul> </div> </li> <li> <div class="img bigimg fleximg box fsocojw"><a href="https://www.wusumeng.com/news/485630.html" title="最新Velocity使用和Velocity语法" class="bqrazsw"><img src="https://www.wusumeng.com/uploads/202603/05/2bd1790c0cd110c5.webp" alt="最新Velocity使用和Velocity语法" class="gzfbdpt"></a></div> <div class="text flex5 flextext nlgrhst"> <h3 class="list-title fzwfwar"><a href="https://www.wusumeng.com/news/485630.html" title="最新Velocity使用和Velocity语法" class="bjupmex">最新Velocity使用和Velocity语法</a></h3> <ul class="info"> <li>互联网</li> <li>2026年04月04日</li> </ul> </div> </li> <li> <div class="img bigimg fleximg box hmtante"><a href="https://www.wusumeng.com/news/485629.html" title="最新的iOS应用上架App Store详细流程解析" class="nvxmvto"><img src="https://www.wusumeng.com/uploads/202603/05/e29a3b40e54c233c.webp" alt="最新的iOS应用上架App Store详细流程解析" class="ipijztl"></a></div> <div class="text flex5 flextext mrexonr"> <h3 class="list-title gcjvpcb"><a href="https://www.wusumeng.com/news/485629.html" title="最新的iOS应用上架App Store详细流程解析" class="kdpmyx">最新的iOS应用上架App Store详细流程解析</a></h3> <ul class="info"> <li>互联网</li> <li>2026年04月04日</li> </ul> </div> </li> <li> <div class="img bigimg fleximg box iilwpuy"><a href="https://www.wusumeng.com/news/485588.html" title=".NET Core 3.0之深入源码理解Startup的注册及运行" class="mymyzrm"><img src="" alt=".NET Core 3.0之深入源码理解Startup的注册及运行" class="gmkuwku"></a></div> <div class="text flex5 flextext jsrle"> <h3 class="list-title hwtalvz"><a href="https://www.wusumeng.com/news/485588.html" title=".NET Core 3.0之深入源码理解Startup的注册及运行" class="mpozaqz">.NET Core 3.0之深入源码理解Startup的注册及运行</a></h3> <ul class="info"> <li>互联网</li> <li>2026年04月04日</li> </ul> </div> </li> <li> <div class="img bigimg fleximg box ljrwpyw"><a href="https://www.wusumeng.com/news/485628.html" title="作为一个新手的Oracle（DBA）学习笔记【转】" class="jaymxvw"><img src="http://img.blog.csdn.net/20170410102025550?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjQ5OTQ3Nzc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="作为一个新手的Oracle（DBA）学习笔记【转】" class="dlnyypy"></a></div> <div class="text flex5 flextext dyhjurw"> <h3 class="list-title lqghiml"><a href="https://www.wusumeng.com/news/485628.html" title="作为一个新手的Oracle（DBA）学习笔记【转】" class="itkqmin">作为一个新手的Oracle（DBA）学习笔记【转】</a></h3> <ul class="info"> <li>互联网</li> <li>2026年04月04日</li> </ul> </div> </li> </ul> </div> <div class="side flex bgwhite ps15 dbctbpv"> <div class="side-title ehosjhx">推荐内容</div> <ul class="side-ul flex"> <li> <div class="img bigimg fleximg box mdyhace"><a href="https://www.wusumeng.com/news/2.html" title="测试文章2" class="jegqdkw"><img src="https://www.wusumeng.com/uploads/202602/15/11933106cc6f4a93.png" alt="测试文章2" class="kxcudcd"></a></div> <div class="text flex5 flextext kkjxgzl"> <h3 class="list-title cchrxnj"><a href="https://www.wusumeng.com/news/2.html" title="测试文章2" class="elanqmz">测试文章2</a></h3> <ul class="info"> <li>互联网</li> <li>2026年03月17日</li> </ul> </div> </li> <li> <div class="img bigimg fleximg box lgkavhq"><a href="https://www.wusumeng.com/news/1.html" title="测试文章1" class="jzypnmi"><img src="https://www.wusumeng.com/uploads/202602/15/fd36974639ee48f6.png" alt="测试文章1" class="butximw"></a></div> <div class="text flex5 flextext erpafky"> <h3 class="list-title kunedun"><a href="https://www.wusumeng.com/news/1.html" title="测试文章1" class="jqvlfjb">测试文章1</a></h3> <ul class="info"> <li>互联网</li> <li>2026年03月17日</li> </ul> </div> </li> </ul> </div> </div> <!-- 侧边栏 --> </div> </div> </div> </div> </main> <!-- 核心内容 --> </div> <!-- 核心内容 --> <!-- 底部 --> <div class="footer p30 mizocom"> <div class="container ibmehzq"> <div class="foot text-white swwnwm"> <p class="gqtyvdi">Copyright © 2008-2026 <a href="https://www.wusumeng.com" title="五速梦信息网" class="mkhmygn">五速梦信息网</a> 版权所有。<p class="hzxgtlf"><a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow" class="okluwr">蜀ICP备2025158979号-1</a> | <a href="https://beian.mps.gov.cn/#/query/webSearch?code=51010502015432" rel="noreferrer" target="_blank" class="guurtzf">川公网安备51010502015432号</a> <a href="https://www.wusumeng.com/sitemap.xml" title="网站地图" target="_blank" rel="nofollow" class="mxlbwso">网站地图</a> <p class="ikfzmym">本站所有信息均来源于互联网搜集，并不代表本站观点，本站不对其真实合法性负责。如有信息侵犯了您的权益，请告知，本站将立刻删除。</p> </div> </div> <div id="backToTop" class="nplfyrp"><i class="fa fa-angle-double-up"></i></div> </div> <!-- 底部 --> <!-- js --> <script src="https://www.wusumeng.com/static/aq-cn-002/js/jquery-3.7.1.min.js" type="text/javascript"></script> <script src="https://www.wusumeng.com/static/aq-cn-002/js/main.js" type="text/javascript"></script> <!-- js --> <div class="hide hrnprnz"><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?8b9c575a72b544e6d55c72d8028f682d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </body> <script> (function() { var al = document.createElement("script"); al.src = "/api/log?action=views&code=200&id=217283&path=http%3A%2F%2Fwww.wusumeng.com%3A443%2Fnews%2F217283.html&type=archive&nonce="+Date.now(); document.body.appendChild(al); })(); </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2026-02-17T02:50:03+08:00", "datePublished": "2026-03-19T18:20:59+08:00", "description": "vue.js v-model 指令可以用在表单控件元素上创建双向数据绑定 同时 v-model 指令会根据控件类型自动选取正确的方法来更新元素 \u0026lt;input\u0026gt;,\u0026lt;textarea\u0026gt; 与 v-model 指令 下面的代码演示了 \u0026lt;input\u0026gt; 和 \u0026lt;textarea\u0026gt; 元素中使用 v-model 实现双向数据绑定 复选框 checkbox", "headline": "\u003cinput\u003e,\u003ctextarea\u003e 与 v", "image": [ "http://api.fly63.com/public/Uploads/20210122/600af1b686507.png" ], "mainEntityOfPage": { "@id": "https://www.wusumeng.com/news/217283.html", "@type": "WebPage" } } </script> </html>