vue中v-model的应用及使用详解

vue中经常使用到和这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。</p> <p> v-model本质上是一个语法糖。如下代码<code><input v-model="test"></code>本质上是<<code>input :value="test" @input="test = $event.target.value"></code>，其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入到input，下面代码是v-model的一个简单的例子。在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。可以在如下div中加入<p>{{ test}}</p>获取input数据，然后去修改input中数据会发现<p></p>中数据随之改变。</p> <div class="jb51code"> <pre class="brush:js;"> <div id="app"> <input v-model="test"> <!-- <input :value="test" @input="test= $event.target.value"> --><!--语法糖--> </div> <script src="/resources/js/vue.js"></script> <script> new Vue({ el: '#app',data: { test: '这是一个测试' } }); </script></pre> </div> <p><h3>1.v-model在input的下拉框、单选按钮、复选框中的应用</h3></p> <p> 如下面代码，分别是v-model在input不同的组件中的应用，但是大体用法相同。注意：像下面代码中复选框这样需要接收多条数据的情况下，在data里面应该由数组与其对应二不是字符串。</p> <p> 这里有一个值绑定的问题，不管是下拉框或者单选按钮还是复选框，我们都可以在对应的标签内设置value。以下拉框为例，我们在<option>中添加了vulue=“A被选”，当我们选择第一个下拉框A的时候，在selected中的字符串为‘A被选'，如果我们不在<option>中设置value值的话那么selected中的字符串将是<option>中的值‘A'。</p> <p> 这里还有一个和vue无关的问题，比较简单，但是由于平时主要做后台java开发没太注意这个前端问题。以下面的单选按钮代码为例，<label>标签内有一个for元素与input中的id值对应(两个值相同)，刚开始不太理解为什么这么写，这个对前端人员来说应该是一个很简单的问题。这样写的目的没有其它任何作用，只是label元素为鼠标改进了可用性，在点击label的时候也相当于点击了对应的input控件，点击label标签也可以触发input标签控件。例如单选按钮在加了for之后点击small也可以选择对应按钮，但是如果不加for是没有任何反应的。 </p> <div class="jb51code"> <pre class="brush:js;"> <!--下拉框--> <div id="app"> <select v-model="selected"> <option value="A被选">A</option> <option value="B被选">B</option> <option value="C被选">C</option> </select> <span>Selected: {{ selected }}</span> </div> <script src="/resources/js/vue.js"></script> <script> new Vue({ el: '#app',data: { selected: '' } }); </script> <!--单选按钮--> <p><div id="app"><br /> <input type="radio" id="small" value="small_value" v-model="picked"><br /> <label for="small">small</label><br /> <br><br /> <input type="radio" id="big" value="big_value" v-model="picked"><br /> <label for="big">big</label><br /> <br><br /> <span>Picked: {{ picked }}</span></p> </div> <script src="/resources/js/vue.js"></script> <script> new Vue({ el: '#app',data: { picked: '' } }) </script> <!--复选框--> <p><div id="app"><br /> <input type="checkbox" id="one" value="value_one" v-model.lazy="checkedNames"><br /> <label for="one">选项一</label><br /> <input type="checkbox" id="two" value="value_two" v-model.lazy="checkedNames"><br /> <label for="two">选项二</label><br /> <input type="checkbox" id="three" value="value_three" v-model.lazy="checkedNames"><br /> <label for="three">选项三</label><br /> <br><br /> <span>Checked names: {{ checkedNames }}</span></p> </div> <script src="/resources/js/vue.js"></script> <script> new Vue({ el: '#app',data: { checkedNames: [] } }) </script></pre> </div> <p><h3>2.v-model修饰符</h3></p> <p> v-model也可以和.lazy、.trim和.number这些修饰符一起使用。</p> <div class="jb51code"> <pre class="brush:js;"> <!-- 在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步 --> <input v-model.lazy="msg" > <!--去除字符串首尾的空格--> <input v-model.trim="msg"> <!--将数据转化为值类型--> <input v-model.number="age" type="number"></pre> </div> <p> .trim和.number的用法比较简单，这里就不做过多解释。.lazy相当于一个延迟加载的过程。在上面我们讲过<input v-model="test">相当于一个语法糖<code><input :value="test" @input="test = $event.target.value">，</code>而<code><input v-model.lazy="msg" ></code>则相当将input的实时更新改为一个change事件，v-model.lazy只有当焦点移除input时才会触发事件。下图1位v-model效果，图2位v-model.lazy效果。</p> <p style="text-align: center"><img src="https:https://files.52php.cn/file_images/article/201806/201862785813429.png?201852785843" alt="" /></p> <p><h3>下面在单独给大家介绍下vue中v-model使用</h3></p> <p>v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：</p> <p>  1. v-bind绑定一个value属性</p> <p>  2. v-on指令给当前元素绑定input事件</p> <p>自定义组件使用v-model，应该有以下操作：</p> <p>1. 接收一个value prop</p> <p>2. 触发input事件，并传入新值</p> <p>在原生表单元素中：</p> <div class="jb51code"> <pre class="brush:js;"> <input v-model="inputValue"></pre> </div> <p>相当于</p> <div class="jb51code"> <pre class="brush:js;"> <input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value"></pre> </div> <p>在自定义组件中</p> <div class="jb51code"> <pre class="brush:js;"> <my-component v-model="inputValue"></my-component></pre> </div> <p>相当于</p> <div class="jb51code"> <pre class="brush:js;"> <my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component></pre> </div> <p>这个时候，inputValue接受的值就是input事件的回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还需要$emit去触发input的事件。</p> <div class="jb51code"> <pre class="brush:js;"> this.$emit('input',value)</pre> </div> <p><h3>总结</h3> </p> <p>以上所述是小编给大家介绍的vue中v-model的应用及使用详解。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 </p> <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/1216/524658.html" target="_blank">Vue.js&mdash;&mdash;60分钟browserify项目模板快速入门</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/384817.html" target="_blank">reactjs – 如何访问react组件中的url参数</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1213/127477.html" target="_blank">谈一谈自己对依赖、关联、聚合和组合之间区别的理解 .</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/163069.html" target="_blank">正则表达式基本运用</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/374572.html" target="_blank">smdk2410启动代码分析</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/321988.html" target="_blank">ReactOS编译成VS工程</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/481591.html" target="_blank">xml笔记:3 引入xsd来编写xml</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/346021.html" target="_blank">React Native 初学-新建HelloWorldApp工程</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/81105.html" target="_blank">SQLite数据库</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/51518.html" target="_blank">oralce中查询某个机构号及其下属机构号，这样的树形数据查询</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/1214/182376.html" target="_blank">Swift3.0语言教程查找字符集和子字符串</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1213/93911.html" target="_blank">主流nosql数据库对比</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1217/542366.html" target="_blank">vue项目tween方法实现返回顶部的示例代码</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/45948.html" target="_blank">Oracle EBS 企业税改方案(三)-未结采购单据及部分</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1217/539559.html" target="_blank">ruby-on-rails – Rails Rspec套件出现故障但是单</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/449816.html" target="_blank">XML Bitmap</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/182862.html" target="_blank">Swift 中的过滤器</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/63916.html" target="_blank">简单三步轻松实现ORACLE字段自增</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1213/109232.html" target="_blank">关于PostgreSQL编码</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/431516.html" target="_blank">ajax嵌入</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>