Vue表单及表单绑定方法 程序员文章站 2023-01-10 20:36:14 基础用法 可以用 v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法...</div> <div class="content"> <p><span style="background-color: #ccffcc"><strong>基础用法</strong></span></p> <p>可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 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="jb51code"> <pre class="brush:js;"> <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue 测试实例 - 输入框</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p>input 元素：{{ message }}</p> <input v-model="message" placeholder="编辑我……"> <p style="white-space: pre">textarea 元素：{{ message2 }}</p> <textarea v-model="message2" placeholder="多行文本输入……"></textarea> </div> <script> new vue({ el: '#app', data: { message: 'you can try it ', message2: '多行语句\r\n welcome here' } }) </script> </body> </html> </pre> </div> <p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="Vue表单及表单绑定方法" src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA2MDMvYl8wXzIwMTkwNjAzMDA1NDQ1NTEwMS5qcGc=" title="Vue表单及表单绑定方法"></p> <p><span style="background-color: #ccffcc"><strong>复选框</strong></span></p> <p>可以结合计算属性，输出自己想要的效果。</p> <p><strong>案例2：</strong></p> <div class="jb51code"> <pre class="brush:js;"> <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue 测试实例 - 复选框</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p>单个复选框：</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ isclick }}</label> <p>多个复选框：</p> <input type="checkbox" id="baidu" value="baidu" v-model="checkednames"> <label for="baidu">baidu</label> <input type="checkbox" id="google" value="google" v-model="checkednames"> <label for="google">google</label> <input type="checkbox" id="taobao" value="taobao" v-model="checkednames"> <label for="taobao">taobao</label> <br> <span>选择的值为: {{ checkednames }}</span> </div> <script> new vue({ el: '#app', data: { checked : false, checkednames: [] }, computed:{ isclick:function(){ return this.checked?"you clicked me ":"you not cleck me" } } }) </script> </body> </html> </pre> </div> <p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="Vue表单及表单绑定方法" src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA2MDMvYl8wXzIwMTkwNjAzMDA1NDQ1MzY1OC5qcGc=" title="Vue表单及表单绑定方法"></p> <p><span style="background-color: #ccffcc"><strong>单选按钮</strong></span></p> <p>以下实例中演示了单选按钮的双向数据绑定：</p> <p><strong>案例3</strong></p> <div class="jb51code"> <pre class="brush:js;"> <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue 测试实例 - 单选按钮</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <input type="radio" id="men" value="men" v-model="picked"> <label for="men">男人</label> <br> <input type="radio" id="women" value="women" v-model="picked"> <label for="women">女人</label> <br> <span>你喜欢: {{ finalchose }}（{{picked}}）</span> </div> <script> new vue({ el: '#app', data: { picked : 'men' }, computed:{ finalchose:function(){ return this.picked==='men'?"男人":"女人" } } }) </script> </body> </html> </pre> </div> <p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="Vue表单及表单绑定方法" src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA2MDMvYl8wXzIwMTkwNjAzMDA1NDQ2OTQ1OC5qcGc=" title="Vue表单及表单绑定方法"></p> <p><span style="background-color: #ccffcc"><strong>select 列表</strong></span></p> <p>以下实例中演示了下拉列表的双向数据绑定：</p> <p><strong>案例4</strong></p> <div class="jb51code"> <pre class="brush:js;"> <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue 测试实例 - select 列表</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <select v-model="selected" name="fruit"> <option value="" disabled >选择一种水果</option> <option value="banana">香蕉</option> <option value="apple">苹果</option> </select> <div id="output"> 选择的水果是: {{selected}} </div> </div> <script> new vue({ el: '#app', data: { selected: '' } }) </script> </body> </html> </pre> </div> <p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="Vue表单及表单绑定方法" src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA2MDMvYl8wXzIwMTkwNjAzMDA1NDQ2OTQ4Ny5qcGc=" title="Vue表单及表单绑定方法"></p> <p><strong>用 v-for 渲染的动态选项：</strong></p> <div class="jb51code"> <pre class="brush:js;"> <meta charset="utf-8"> <title>vue 测试实例 - select 列表</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <select v-model="selected" name="fruit" > <option v-for="option in options" v-bind:value="option.value" stype='width:400px'> {{option.text}} </option> </select> <div id="output"> 选择的水果是: {{selected}} </div> </div> <script> new vue({ el: '#app', data: { selected: '', options:[ {text:'选择一个水果',value:''}, {text:'香蕉',value:'banana'}, {text:'苹果',value:'apple'} ] }, }) </script> </body> </html> </pre> </div> <p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="Vue表单及表单绑定方法" src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA2MDMvYl8wXzIwMTkwNjAzMDA1NDQ2NjU3Mi5qcGc=" title="Vue表单及表单绑定方法"></p> <p><span style="background-color: #ccffcc"><strong>修饰符</strong></span></p> <p><strong>.lazy</strong></p> <p>在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：</p> <div class="jb51code"> <pre class="brush:xhtml;"> <!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" ></pre> </div> <p><strong>.number</strong></p> <p>如果想自动将用户的输入值转为 number 类型（如果原值的转换结果为 nan 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：</p> <div class="jb51code"> <pre class="brush:xhtml;"> <input v-model.number="age" type="number"></pre> </div> <p>这通常很有用，因为在 type="number" 时 html 中输入的值也总是会返回字符串类型。</p> <p><strong>.trim</strong></p> <p>如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：</p> <div class="jb51code"> <pre class="brush:xhtml;"> <input v-model.trim="msg"> </pre> </div> <p>以上这篇vue表单及表单绑定方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。</p> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/1959967.html"> Vue作用域插槽slot-scope实例代码 </a> </p> <p> 下一篇： <a href="/article/1959969.html"> Vue组件中的data必须是一个function的原因浅析 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2063669.html" target="_blank" title="Python3.4 splinter(模拟填写表单)使用方法"> <h2> Python3.4 splinter(模拟填写表单)使用方法 </h2> </a> </li> <li> <a href="/article/2063349.html" target="_blank" title="jquery实现ajax提交form表单的方法总结"> <h2> jquery实现ajax提交form表单的方法总结 </h2> </a> </li> <li> <a href="/article/2059704.html" target="_blank" title="jquery submit()不能提交表单的解决方法"> <h2> jquery submit()不能提交表单的解决方法 </h2> </a> </li> <li> <a href="/article/2059362.html" target="_blank" title="Vue.JS入门教程之处理表单"> <h2> Vue.JS入门教程之处理表单 </h2> </a> </li> <li> <a href="/article/2051555.html" target="_blank" title="Vue实现双向绑定的方法"> <h2> Vue实现双向绑定的方法 </h2> </a> </li> <li> <a href="/article/2051167.html" target="_blank" title="Vue中使用vee-validate表单验证的方法"> <h2> Vue中使用vee-validate表单验证的方法 </h2> </a> </li> <li> <a href="/article/2049517.html" target="_blank" title="关于layui表单中按钮自动提交的解决方法"> <h2> 关于layui表单中按钮自动提交的解决方法 </h2> </a> </li> <li> <a href="/article/2049414.html" target="_blank" title="防止Layui form表单重复提交的实现方法"> <h2> 防止Layui form表单重复提交的实现方法 </h2> </a> </li> <li> <a href="/article/2045598.html" target="_blank" title="Vue动态加载图片在跨域时无法显示的问题及解决方法"> <h2> Vue动态加载图片在跨域时无法显示的问题及解决方法 </h2> </a> </li> <li> <a href="/article/2044551.html" target="_blank" title="vue实现重置表单信息为空的方法"> <h2> vue实现重置表单信息为空的方法 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>