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 验证密码强弱的小例子
Mar 21 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
小程序自定义日历效果
Dec 29 Javascript
JS实现的字符串数组去重功能小结
Jun 17 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 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
Python模块包中__init__.py文件功能分析
2016/06/14 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
数据保密承诺书
2014/06/03 职场文书
毕业生实习证明
2014/09/19 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
实习协议书
2015/01/27 职场文书
人事局接收函
2015/01/31 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers