Vue表单及表单绑定方法

今天小编就为大家分享一篇Vue表单及表单绑定方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

基础用法

可以用 v-model 指令在表单及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。</p> <p><strong>注：</strong></p> <p>1.v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。</p> <p>2.对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。</p> <p><span style="background-color: #ccffcc"><strong>输入框</strong></span></p> <p><span style="color: #000000"><strong>案例1</strong></span></p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> <title>Vue 测试实例 - 输入框</title> <div id="app"> <p>input 元素：{{ message }}</p><p>textarea 元素：{{ message2 }}</p><textarea></textarea></div></pre> </div> <p style="text-align: center"> <p><span style="background-color: #ccffcc"><strong>复选框</strong></span></p> <p>可以结合计算属性，输出自己想要的效果。</p> <p><strong>案例2：</strong></p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> <title>Vue 测试实例 - 复选框</title> <div id="app"> <p>单个复选框：</p><label for="checkbox">{{ isClick }}</label><p>多个复选框：</p><label for="baidu">Baidu</label><label for="google">Google</label><label for="taobao">taobao</label><br><span>选择的值为: {{ checkedNames }}</span></div></pre> </div> <p style="text-align: center"> <p><span style="background-color: #ccffcc"><strong>单选按钮</strong></span></p> <p>以下实例中演示了单选按钮的双向数据绑定：</p> <p><strong>案例3</strong></p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> <title>Vue 测试实例 - 单选按钮</title> <div id="app"> <label for="men">男人</label><br><label for="women">女人</label><br><span>你喜欢: {{ finalChose }}（{{picked}}）</span></div><span style="color:transparent">本文来源gaodai#ma#com搞*!代#%^码网%</span></pre> </div> <p style="text-align: center"> <p><span style="background-color: #ccffcc"><strong>select 列表</strong></span></p> <p>以下实例中演示了下拉列表的双向数据绑定：</p> <p><strong>案例4</strong></p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> <title>Vue 测试实例 - select 列表</title> <div id="app"> 选择一种水果香蕉苹果<div id="output"> 选择的水果是: {{selected}} </div></div></pre> </div> <p style="text-align: center"> <p><strong>用 v-for 渲染的动态选项：</strong></p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> <title>Vue 测试实例 - select 列表</title> <div id="app"> {{option.text}} <div id="output"> 选择的水果是: {{selected}} </div></div></pre> </div> <p style="text-align: center"> <p><span style="background-color: #ccffcc"><strong>修饰符</strong></span></p> <p><strong>.lazy</strong></p><div><div class="_t33rkthes8f"></div><script type="text/javascript">(window.slotbydup = window.slotbydup || []).push({id: "u6795179",container: "_t33rkthes8f",async: true});</script></div> <p>在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> </pre> </div> <p><strong>.number</strong></p> <p>如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> </pre> </div> <p>这通常很有用，因为在 type=”number” 时 HTML 中输入的值也总是会返回字符串类型。</p> <p><strong>.trim</strong></p> <p>如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> </pre> </div> <p>以上这篇Vue表单及表单绑定方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com" rel="nofollow" >gaodaima搞代码网</a>。</p> </div> <p>以上就是Vue表单及表单绑定方法的详细内容，更多请关注<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com" rel="nofollow" >gaodaima搞代码网</a>其它相关文章！</p> <hr /><div class="open-message">搞代码网（<a href="www.gaodaima.com" target="_blank" title="gaodaima.com">gaodaima.com</a>）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱<a>chengxuyuan@gaodaima.com‍</a>，我们会在看到邮件的第一时间内为您处理，或直接联系<a>QQ：872152909</a>。本网站采用<a href="https://www.gaodaima.com/go.html?url=http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow" target="_blank" title="BY-NC-SA授权协议">BY-NC-SA</a>协议进行授权 <br >转载请注明原文链接：<a href="https://www.gaodaima.com/177696.html" target="_blank" title="Vue表单及表单绑定方法">Vue表单及表单绑定方法</a><a id="spreadAds" target="_blank" href="" onclick="spreadAds()"></a><a id="spreadAds2" target="_blank" href=""></a> </div> </p> <div class="article-social"> <a href="javascript:;" data-action="ding" data-id="177696" id="Addlike" class="action"><i class="fa fa-heart-o"></i>喜欢 (<span class="count">0</span>)</a><span class="or"><style>.article-social .weixin:hover{background:#fff;}</style><a class="weixin" style="border-bottom:0px;font-size:15pt;cursor:pointer;">赏<div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title"><center>[搞代码]</center></div><div class="popover-content"><img width="200px" height="200px" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png" ></div></div></div></a></span><span class="action action-share bdsharebuttonbox"><i class="fa fa-share-alt"></i>分享 (<span class="bds_count" data-cmd="count" title="累计分享0次">0</span>)<div class="action-popover"><div class="popover top in"><div class="arrow"></div><div class="popover-content"><a href="#" class="sinaweibo fa fa-weibo" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_qzone fa fa-star" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="qq fa fa-qq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_renren fa fa-renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin fa fa-weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_more fa fa-ellipsis-h" data-cmd="more"></a></div></div></div></span></div> </article> <footer class="article-footer"> </footer> <nav class="article-nav"><div class="_d13vl98i0pw"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795176", container: "_d13vl98i0pw", async: true });</script> </nav><div id="donatecoffee" style="overflow:auto;display:none;"><img width="400" height="400" alt="支持作者一杯咖啡" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png"></div> <div class="related_top"> <div class="related_posts"><ul class="related_img"> <li class="related_box" > <a href="https://www.gaodaima.com/183672.html" title="Vue.js 快速入门" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/8.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Vue.js 快速入门" /><br><span class="r_title">Vue.js 快速入门</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/183668.html" title="扩展VueJS组件" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/9.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="扩展VueJS组件" /><br><span class="r_title">扩展VueJS组件</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/183669.html" title="VueJS项目的5个很棒的样板/模板" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/10.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="VueJS项目的5个很棒的样板/模板" /><br><span class="r_title">VueJS项目的5个很棒的样板/模板</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/183670.html" title="使用Vuelidate进行简单的Vue.js表单验证" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/7.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="使用Vuelidate进行简单的Vue.js表单验证" /><br><span class="r_title">使用Vuelidate进行简单的Vue.js表单验证</span></a> </li> </ul><div class="relates"><div class="_mw9fz31sqco"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795180", container: "_mw9fz31sqco", async: true });</script><ul><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183672.html">Vue.js 快速入门</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183668.html">扩展VueJS组件</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183669.html">VueJS项目的5个很棒的样板/模板</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183670.html">使用Vuelidate进行简单的Vue.js表单验证</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183671.html">vue.js 入门基础</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183664.html">用于VueJS和Webpack的代码分割模式</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183665.html">如何构建出色的Vue组件</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183666.html">Vue.js开发的4个基本ES2015特性</a></li></ul></div></div> </div> <div id="comment-ad" class="banner banner-related"><div class="_9madbukio7r"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6677406", container: "_9madbukio7r", async: true });</script><script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script></div> <div id="respond" class="no_webshot"> <form action="https://www.gaodaima.com/asdloie8574asdqwexzxdqwertasdqwe.php" method="post" id="commentform"> <div class="comt-title"> <div class="comt-avatar pull-left"> <img src="https://cdn.v2ex.com/gravatar/?s=50" class="avatar avatar-108"> </div> <div class="comt-author pull-left"> 发表我的评论 </div> <a id="cancel-comment-reply-link" class="pull-right" href="javascript:;">取消评论</a> </div> <div class="comt"> <div class="comt-box"> <textarea placeholder="说点什么吧…" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};">

评论通知

表情贴图加粗删除线居中斜体签到

Hi，您需要填写昵称和邮箱！

昵称昵称 (必填)
邮箱邮箱 (必填)
网址网址