VUE.JS学习笔记（vmodel、HandlingForms）

vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍：

v-model这个指令只能用在, ,这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。这是通过设置属性访问器实现的。例如：</code></p> <div class="cnblogs_code"> <pre><span >var</span> data =<span > { name: </span>"erik"<span >, getName: </span><span >function</span><span >() { </span><span >return</span> <span >this</span><span >.name; }, setName: </span><span >function</span><span >(name) { </span><span >this</span>.name =<span > name; } };</span></pre> </div> <p>上面的代码中我们通过<code>getName()</code>和<code>setName()</code>方法作为访问器，我们可以进一步严格限制（如借助Object.defineProperty方法）不直接访问name这个属性，所有对<code>data.name</code>的读写都必须通过<code>data.getName()</code>和<code>data.setName()</code>方法。此时我们改写访问器方法，添加对属性值改变得到监控，便可以实现数据的双向绑定。</p> <p>那么在表单处理中我们具体如何使用v-model呢，先看看官方文档给出的例子：</p> <div class="cnblogs_code"> <pre><span ><</span><span >form </span><span >id</span><span >="demo"</span><span >></span> <span ></span> <span ><</span><span >p</span><span >></span> <span ><</span><span >input </span><span >type</span><span >="text"</span><span > v-model</span><span >="msg"</span><span >></span><span > {{msg}} </span><span ></</span><span >p</span><span >></span> <span ></span> <span ><</span><span >p</span><span >></span> <span ><</span><span >input </span><span >type</span><span >="checkbox"</span><span > v-model</span><span >="checked"</span><span >></span><span > {{checked ? "yes" : "no"}} </span><span ></</span><span >p</span><span >></span> <span ></span> <span ><</span><span >p</span><span >></span> <span ><</span><span >input </span><span >type</span><span >="radio"</span><span > name</span><span >="picked"</span><span > value</span><span >="one"</span><span > v-model</span><span >="picked"</span><span >></span> <span ><</span><span >input </span><span >type</span><span >="radio"</span><span > name</span><span >="picked"</span><span > value</span><span >="two"</span><span > v-model</span><span >="picked"</span><span >></span><span > {{picked}} </span><span ></</span><span >p</span><span >></span> <span ></span> <span ><</span><span >p</span><span >></span> <span ><</span><span >select </span><span >v-model</span><span >="selected"</span><span >></span> <span ><</span><span >option</span><span >></span>one<span ></</span><span >option</span><span >></span> <span ><</span><span >option</span><span >></span>two<span ></</span><span >option</span><span >></span> <span ></</span><span >select</span><span >></span><span > {{selected}} </span><span ></</span><span >p</span><span >></span> <span ></span> <span ><</span><span >p</span><span >></span> <span ><</span><span >select </span><span >v-model</span><span >="multiSelect"</span><span > multiple</span><span >></span> <span ><</span><span >option</span><span >></span>one<span ></</span><span >option</span><span >></span> <span ><</span><span >option</span><span >></span>two<span ></</span><span >option</span><span >></span> <span ><</span><span >option</span><span >></span>three<span ></</span><span >option</span><span >></span> <span ></</span><span >select</span><span >></span><span > {{multiSelect}} </span><span ></</span><span >p</span><span >></span> <span ><</span><span >p</span><span >><</span><span >pre</span><span >></span>data: {{$data | json 2}}<span ></</span><span >pre</span><span >></</span><span >p</span><span >></span> <span ></</span><span >form</span><span >></span></pre> </div> <p>对应的js：</p> <div class="cnblogs_code"> <pre><span >new</span><span > Vue({ el: </span>‘#demo‘<span >, data: { msg : </span>‘hi!‘<span >, checked : </span><span >true</span><span >, picked : </span>‘one‘<span >, selected : </span>‘two‘<span >, multiSelect: [</span>‘one‘, ‘three‘<span >] } })</span></pre> </div> <p>效果如下：</p> <p><img alt="技术分享" src="https://img.php1.cn/3cd4a/1eebe/cd5/4283cd4bbba41b87.png" /></p> <p>小伙伴们可以尝试一下写出这个页面，在浏览器中当你调整上面表单元素的选中值时，你会发现下面打印的vue实例内容也会随之改变，而如果你在代码中改变vue实例data内容时渲染出来的表单选中值也会随之改变。</p> <p>另外，v-model这个指令还有几个可选的参数：lazy,number,options,debounce<code><br /></code></p> <p>1.使用lazy参数是将双向数据同步的时间节点从input触发改为了change触发，调用方式如下：</p> <div class="cnblogs_code"> <pre><span ></span> <span ><</span><span >input </span><span >v-model</span><span >="msg"</span><span > lazy</span><span >></span></pre> </div> <p><span >2.使用number参数是通知v-model绑定的dom元素把用户输入值默认当成数字来处理，调用如下：</span></p> <div class="cnblogs_code"> <pre><span ><</span><span >input </span><span >v-model</span><span >="age"</span><span > number</span><span >></span></pre> </div> <p>3.使用options参数是用于渲染一个select项的列表，调用方式如下：</p> <div class="cnblogs_code"> <pre><span ><</span><span >select </span><span >v-model</span><span >="selected"</span><span > options</span><span >="myOptions"</span><span >></</span><span >select</span><span >></span></pre> </div> <p>其中options的参数名指向一个数组，该数组可以包括字符串或对象，对象可以是{text:‘‘, value:‘‘}的形式，指定了<option>的value属性与text内容，例如：</p> <div class="cnblogs_code"> <pre><span >[ { text: </span>‘A‘, value: ‘a‘<span > }, { text: </span>‘B‘, value: ‘b‘<span > } ]</span></pre> </div> <p>将渲染出：</p> <div class="cnblogs_code"> <pre><span ><</span><span >select</span><span >></span> <span ><</span><span >option </span><span >value</span><span >="a"</span><span >></span>A<span ></</span><span >option</span><span >></span> <span ><</span><span >option </span><span >value</span><span >="b"</span><span >></span>B<span ></</span><span >option</span><span >></span> <span ></</span><span >select</span><span >></span></pre> </div> <p>如果对象是{ label:‘‘, options:[...] }的形式，则可以渲染出多个option组<optgroup>,如下例：</p> <div class="cnblogs_code"> <pre><span >[ { label: </span>‘A‘, options: [‘a‘, ‘b‘<span >]}, { label: </span>‘B‘, options: [‘c‘, ‘d‘<span >]} ]</span></pre> </div> <p>将渲染出：</p> <div class="cnblogs_code"> <pre><span ><</span><span >select</span><span >></span> <span ><</span><span >optgroup </span><span >label</span><span >="A"</span><span >></span> <span ><</span><span >option </span><span >value</span><span >="a"</span><span >></span>a<span ></</span><span >option</span><span >></span> <span ><</span><span >option </span><span >value</span><span >="b"</span><span >></span>b<span ></</span><span >option</span><span >></span> <span ></</span><span >optgroup</span><span >></span> <span ><</span><span >optgroup </span><span >label</span><span >="B"</span><span >></span> <span ><</span><span >option </span><span >value</span><span >="c"</span><span >></span>c<span ></</span><span >option</span><span >></span> <span ><</span><span >option </span><span >value</span><span >="d"</span><span >></span>d<span ></</span><span >option</span><span >></span> <span ></</span><span >optgroup</span><span >></span> <span ></</span><span >select</span><span >></span></pre> </div> <p>4.使用debounce参数是指定一个延迟时间，延迟从按键触发到数据更新同步之间的时间，当我们的更新操作比较耗时时这个属性十分有用，例如搜索引擎在我们键入字符时发送ajax请求完成自动补全提示，调用如下：</p> <div class="cnblogs_code"> <pre><span ><</span><span >input </span><span >v-model</span><span >="msg"</span><span > debounce</span><span >="500"</span><span >></span></pre> </div> <div><img alt="技术分享" src="file:///C:\Users\Byron\AppData\Roaming\Tencent\Users\1966997923\QQ\WinTemp\RichOle\YZQ`D3X0$DUDNM$V0RX9BYQ.png" /></div><p>VUE.JS学习笔记（v-model、Handling Forms）</p></span> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/android" target="_blank" title="android">android</a></li> <li><a href="https://www.php1.cn/tag/asp.net" target="_blank" title="asp.net">asp.net</a></li> <li><a href="https://www.php1.cn/tag/php" target="_blank" title="php">php</a></li> <li><a href="https://www.php1.cn/tag/jsp" target="_blank" title="jsp">jsp</a></li> <li><a href="https://www.php1.cn/tag/数据库" target="_blank" title="数据库">数据库</a></li> <li><a href="https://www.php1.cn/tag/vue.js" target="_blank" title="vue.js">vue.js</a></li> <li><a href="https://www.php1.cn/tag/select" target="_blank" title="select">select</a></li> <li><a href="https://www.php1.cn/tag/windows" target="_blank" title="windows">windows</a></li> <li><a href="https://www.php1.cn/tag/html" target="_blank" title="html">html</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了

会员登录 | 用户注册