Vuejs第六篇之Vuejs与form元素实例解析

发布时间：2020-12-17 03:05:35 所属栏目：百科来源：网络整理

导读：本文是小编结合官方文档整理的一篇细致代码更多更全的详细教程，非常适合新手学习，感兴趣的朋友一起看看吧！资料来于官方文档：表单绑定 ①常见绑定方法：【1】文本输入框绑定；【2】textarea绑定（类似【1】）；【3】radio选中值绑定；【4】checkbox

本文是小编结合官方文档整理的一篇细致代码更多更全的详细教程，非常适合新手学习，感兴趣的朋友一起看看吧！

资料来于官方文档：

表单绑定

①常见绑定方法：

【1】文本输入框绑定；

【2】textarea绑定（类似【1】）；

【3】radio选中值绑定；

【4】checkbox绑定（自动捆绑数组，无需name）；

【5】select绑定；

【6】select multiple多选选中框绑定；

【7】动态绑定（以上不同类型但同一个值可以互动）；

【8】checkbox选中和未选中赋予不同的值（主要是针对不选中状态）；

【9】checkbox，radio，select选中状态的值动态绑定（主要是指值动态绑定对象或者是vm实例的属性，例如data里的某个属性，或者是computed的某个值）；

如代码：

——————————————

<div>{{textarea}}</div> 
<div>——————————————</div> 
<label><input type="checkbox" v-model="checkbox"/>左边选中右边则为true：{{checkbox}}</label> 
<div>——————————————</div> 
<label><input type="checkbox" value="firstCheckbox" v-model="checkboxes">firstCheckbox</label><br/> 
<label><input type="checkbox" value="secondCheckbox" v-model="checkboxes">secondCheckbox</label><br/> 
<label><input type="checkbox" value="thirdCheckbox" v-model="checkboxes">thirdCheckbox</label><br/> 
<div>以上选中的value情况为：{{checkboxes}}</div> 
<div>以上选中的value情况为（以json格式显示，这里使用了json过滤器）：{{checkboxes|json}}</div> 
<div>——————————————</div> 
<label><input type="radio" value="A" v-model="radio"/>value = A</label><br> 
<label><input type="radio" value="B" v-model="radio"/>value = B</label><br> 
<div>{{radio}}</div> 
<div>注意，这里的v-model的值应该被注册到data里面，否则会红字警告（事实上，所有的都应该也这么做）</div> 
<div>——————————————</div> 
<select v-model="select"> 
<option>默认值，option不设value</option> 
<option value="B">value的值设为B</option> 
<option selected value="C">默认选择这个，value设为C</option> 
</select> 
<div>{{select}}</div> 
<div>同样，这里不注册也会被报错</div> 
<div>——————————————</div> 
<div>以下是select的多选，按住ctrl可以连续选，按住shift选择区间</div> 
<select style="width:200px;height:100px;overflow: hidden;" v-model="multiple" multiple> 
<option value="A">A</option> 
<option value="B">B</option> 
<option value="C">C</option> 
<option value="D">D</option> 
<option value="E">E</option> 
</select> 
<div>多选选中的值是：{{multiple}}</div> 
<div>注意，这个多选select框是默认带y轴的滚动条的</div> 
<div>——————————————</div> 
<div>动态渲染，checkbox和多选select框是互相影响的</div> 
<label><input type="checkbox" value="A" v-model="Dynamic">A</label><br/> 
<label><input type="checkbox" value="B" v-model="Dynamic">B</label><br/> 
<label><input type="checkbox" value="C" v-model="Dynamic">C</label><br/> 
<select style="width:200px;height:100px;overflow: hidden;" v-model="Dynamic" multiple> 
<option value="A">A</option> 
<option value="B">B</option> 
<option value="C">C</option> 
</select> 
<div>选中情况是：{{Dynamic}}</div> 
<div>——————————————</div> 
<div>选中和选中的值自定义的checkbox</div> 
<label><input type="checkbox" v-bind:true-value="differentValues.t" v-bind:false-value="differentValues.f" 
v-model="different">true/false</label><br/> 
<div>different value: {{different}}</div> 
<div>注意，以上不能像普通checkbox那么样，用一个数组作为多个checkbox的v-model的变量，且其值是绑定与vm实例的某个属性； 
因此，不能在v-bind里的值是一个字符串，但可以是一个对象，例如{a:1}这样（当然，这个时候显示的值也是一个对象了） 
</div> 
<div>——————————————</div> 
<div>自定义之的radio</div> 
<label><input type="radio" v-bind:value="text" v-model="customize"/>值为1</label> 
<label><input type="radio" v-bind:value="textarea" v-model="customize"/>值为1</label> 
<div>{{customize}}</div> 
<div>同样，值可以是vm的一个属性或者是一个对象，另外，同样有效的还有select。（主要就这三个有选中状态，除此之外虽然例如Date类型也有选中，但是意义不大）</div> 
<div>——————————————</div> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app',data: { 
text: "默认有输入内容",textarea: "这里是多行文字n第二行，n是换行符，但在字符串里显示为空格",checkboxes: [],radio: "",select: "",multiple: "",Dynamic: {},different: "",differentValues: { 
t: "true",f: "false" 
},customize: '' 
} 
}) 
</script></pre>
</div>
<p><h3>②添加参数：</h3></p>
<p style="text-align: center"><p class="pic_center"><img id="theimg" src="https://files.52php.cn/file_images/article/201609/201695170941596.png?20168517953" alt="" /></p></p>
<p style="text-align: left">【1】lazy</p>
<p>在取消focus状态后才更新值，而不是按键按下时就更新值。</p>
<p>对文本输入框和textarea都有效
</p>
<p>如代码：</p>
<div class="jb51code">
<pre class="brush:js;">
<input type="text" v-model="text" lazy/> 
<div>{{text}}</div></pre>
</div>
<p>【2】number</p>
<p>将输入的值自动转为number类型，如果转后为NaN类型，则返回原值；</p>
<p>如代码：</p>
<div class="jb51code">
<pre class="brush:js;">
<input type="text" v-model="text" number/> 
<div>{{text}}</div> 
<div>{{typeof text}}</div></pre>
</div>
<p>如果加上number这个参数，那么输入数字时，则提示类型为string，加上之后，纯数字会提示number类型；
</p>
<p>【3】debounce=”毫秒数”</p>
<p>当值连续若干毫秒没有变化时，触发变量的值的改变；</p>
<p>如代码：</p>
<div class="jb51code">
<pre class="brush:js;">
<input type="text" v-model="text" debounce="1000"/> 
<div>{{text}}</div></pre>
</div>
<p>当我以500ms的时间差依次输入1,2,3,4,5,6这六个数字时，text的值不会被更新；
</p>
<p>当我停止输入有1000ms时，text值才会被更新；
</p>
<p>因此，适合类似ajax等高消耗操作。</p>
<p>以上所述是小编给大家介绍的Vuejs第六篇之Vuejs与form元素实例解析。编程之家 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/504937.html" target="_blank">ruby-on-rails – Rails PostGIS错误迁移数据库</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/209288.html" target="_blank">正则表达式 – 正则表达式中的崩溃课程和有效的搜索和替换</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/161101.html" target="_blank">haskell – 从属类型：依赖对类型如何类似于不相交联合？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/484383.html" target="_blank">在C中使用Fortran代码</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/291061.html" target="_blank">个人整理</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/292215.html" target="_blank">ios – 更新到Xcode 8后的错误：“没有这样的模块”和“目标</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/437659.html" target="_blank">ajax对 XML 和 Json 数据的解析</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/488748.html" target="_blank">c：我如何调用类中定义的朋友模板函数？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/330021.html" target="_blank">C#自定义类型强制转换实例分析</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/80740.html" target="_blank">内存中的SQLite数据库可以扩展并发吗？</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/1217/543800.html" target="_blank">ruby-on-rails – 使用特定时区保存Rails记录</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/296221.html" target="_blank">Flex：仅接受数字的文本输入</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/317110.html" target="_blank">Flex中给对象加阴影的方法</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/199240.html" target="_blank">如何在titleForHeaderInSection中设置颜色？ -迅</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/295972.html" target="_blank">利用flexbox构建可伸缩布局</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/346798.html" target="_blank">不使用闪存的开源视频聊天服务器</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/504348.html" target="_blank">ruby-on-rails – 将部件从一个控制器的视图渲染</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/503796.html" target="_blank">JSONKit 使用示例</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/433810.html" target="_blank">C语言的isatty函数和ttyname函数以及sendmsg函数</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/322469.html" target="_blank">ArcGis Server for Flex API3.0 新增功能及翻译</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>