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


Posted in Javascript onSeptember 05, 2016

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

资料来于官方文档:

http://cn.vuejs.org/guide/forms.html

表单绑定

①常见绑定方法:

【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 id="app"> 
<input type="text" v-model="text"/> 
<div>{{text}}</div> 
<div>——————————————</div> 
<textarea style="width:200px;height:100px;" v-model="textarea"></textarea> 
<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>

②添加参数:

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

【1】lazy

在取消focus状态后才更新值,而不是按键按下时就更新值。

对文本输入框和textarea都有效

如代码:

<input type="text" v-model="text" lazy/> 
<div>{{text}}</div>

【2】number

将输入的值自动转为number类型,如果转后为NaN类型,则返回原值;

如代码:

<input type="text" v-model="text" number/> 
<div>{{text}}</div> 
<div>{{typeof text}}</div>

如果加上number这个参数,那么输入数字时,则提示类型为string,加上之后,纯数字会提示number类型;

【3】debounce=”毫秒数”

当值连续若干毫秒没有变化时,触发变量的值的改变;

如代码:

<input type="text" v-model="text" debounce="1000"/> 
<div>{{text}}</div>

当我以500ms的时间差依次输入1,2,3,4,5,6这六个数字时,text的值不会被更新;

当我停止输入有1000ms时,text值才会被更新;

因此,适合类似ajax等高消耗操作。

以上所述是小编给大家介绍的Vuejs第六篇之Vuejs与form元素实例解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
Vue表单实例代码
Sep 05 #Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 #Javascript
JS实现的手机端精简幻灯片效果
Sep 05 #Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 #Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 #Javascript
AngularJS实现标签页的两种方式
Sep 05 #Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 #Javascript
You might like
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
浅谈Python数据类型之间的转换
2016/06/08 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
python程序 创建多线程过程详解
2019/09/23 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
审计主管岗位职责
2014/01/31 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
政风行风评议整改方案
2014/09/15 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
老公保证书
2015/01/17 职场文书
教师辞职书范文
2015/02/26 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
2015大学迎新标语
2015/07/16 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
Golang 入门 之url 包
2022/05/04 Golang