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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
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
1 Tube Radio
2021/03/02 无线电
超级简单的php+mysql留言本源码
2009/11/11 PHP
php绘制一个扇形的方法
2015/01/24 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
JS 常用校验函数
2009/03/26 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
js的2种继承方式详解
2014/03/04 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
热能动力工程毕业生自荐信
2013/11/07 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
青年文明号创建承诺
2014/03/31 职场文书
行政内勤岗位职责
2014/04/07 职场文书
《社戏》教学反思
2014/04/15 职场文书
高二学生评语大全
2014/04/25 职场文书
党员创先争优心得体会
2014/09/11 职场文书
运动会通讯稿100字
2015/07/20 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
SQL基础的查询语句
2021/11/11 MySQL