表单输入绑定

<h2 id="基础用法">基础用法

• v-model指令在表单及</code>元素上创建双向数据绑定</li> <li>v-model会忽略所有表单元素的value,checked,selected特性的初始值而总是将vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值</li> </ul> <h3 id="复选框">复选框</h3> <pre><code><div id='example-3'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> <p>new Vue({<br /> el: '#example-3',data: {<br /> checkedNames: []<br /> }<br /> })</code></pre><br /> <h3 id="单选按钮">单选按钮</h3></p> <pre><code><div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> <p>new Vue({<br /> el: '#example-4',data: {<br /> picked: ''<br /> }<br /> })</code></pre><br /> <h3 id="选择框">选择框</h3></p> <pre><code><div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> <p>new Vue({<br /> el: '...',data: {<br /> selected: ''<br /> }<br /> })</code></pre><br /> <h2 id="修饰符">修饰符</h2><br /> <h3 id="lazy"><code>.lazy</code></h3></p> <ul> <li> <p>在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：</p> <pre><code> <!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" ></code></pre> </li> </ul> <h3 id="number"><code>.number</code></h3> <ul> <li> <p>如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：</p> <pre><code> <input v-model.number="age" type="number"></code></pre> </li> <li><p>这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。</p></li> </ul> <h3 id="trim"><code>.trim</code></h3> <ul> <li> <p>如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：</p> <pre><code> <input v-model.trim="msg"></code></pre> </li> </ul> <p style="text-align:right;">（编辑：李大同）</p> <p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p> </td> </tr> </table> </div> <div class="dede_pagess"><ul class="pagelist"></ul></div> <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div> <div class="g-box10"> <div class="t-2">相关内容</div> <ul class="b-box12"></ul> <ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/57139.html" target="_blank">Oracle cursor in sqlplus, and optimizer hints</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/449097.html" target="_blank">org.xml.sax.SAXParseException The content of element ty</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/505822.html" target="_blank">ruby-on-rails – Rails安装失败：activesupport需要Ruby版</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/60514.html" target="_blank">oracle – 如何从SAP ABAP系统中提取数据？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/314487.html" target="_blank">c# – ObjectDisposedException使用MD5 ComputeHash时</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/347872.html" target="_blank">如何在Flash应用程序中扩展默认超时时间？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/295752.html" target="_blank">flex备忘（1）</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/452734.html" target="_blank">xml tools属性详解</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/39810.html" target="_blank">oracle – 为什么dbms_sql.parse包含带有绑定变量的错误PL </a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/438132.html" target="_blank">AJAX响应可以设置cookie吗？</a></li><div class="cl"></div></ul> </div> </div> </div> <div class="right-1 fr"> <div class="g-box8"> <div class="t-2">推荐文章</div> <ul></ul> </div> <div class="g-box11"> <div class="t-2">站长推荐</div> <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/466822.html" target="_blank">rrdtool – rrddump XML格式的文档是什么？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/290217.html" target="_blank">如何在Flex 4 中使用新的CSS语法</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/505702.html" target="_blank">ruby-on-rails – Rails 3 run_callbacks方法</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/50068.html" target="_blank">Oralce awr报告分析</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/293679.html" target="_blank">编译原理-用FLEX构造词法分析程序</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1213/116819.html" target="_blank">PostgreSQL数据库服务器配置</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/41603.html" target="_blank">oracle – 包规范中的NVARCHAR2常量</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/526057.html" target="_blank">ruby-on-rails – Docsplit Ruby on Rails</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/61952.html" target="_blank">Oracle 之 管理</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/245056.html" target="_blank">cocos2d-x-3.0 draw vs onDraw</a></li></ul> </div> <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 }); </script> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div> <div class="g-box3 u-3"> <div class="t-1">热点阅读</div> <ul class="b-box2"></ul> </div> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div> </div> <div class="cl"></div> </div> <div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div> <div class="footer"> <p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p> <p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p> <p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p> <p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p> </div> </body> </html>