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 相关文章推荐
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
vue如何判断dom的class
Apr 26 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
JS数据类型STRING使用实例解析
Dec 18 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
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
python操作mysql数据库
2017/03/05 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
Python3实现定时任务的四种方式
2019/06/03 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
办公室助理岗位职责
2013/12/25 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
清洁工个人工作总结
2015/03/05 职场文书
师范生见习自我总结
2015/06/23 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书