elementUI vue v-model的修饰符
v-model的修饰符
- v-model.lazy 只有在input输入框发生一个blur时才触发
- v-model.trim 将用户输入的前后的空格去掉
- v-model.number 将用户输入的字符串转换成number
(1)input type=text
当使用v-model将input输入框与name绑定那么输入框改变的同时name的值也会同步的发生改变
<input type="text" v-model="name"><br />
<span> {{ name }} </span>
但是,这样会对使用有影响,所以我们可以用v-model的修饰符lazy,v-model.lazy 只有在input输入框发生一个blur时才触发
<input type="text" v-model.lazy="name"><br />
<span> {{ name }} </span>
v-model.trim 将用户输入的前后的空格去掉,我们在输入框中输入很多空格后再输入内容,下面的span还是原来那样的,不会多出空格,原因是HTML只显示一个空格,但是name的值就不一样了,它会将这些空格算上,我们可以在span上加一个pre标签,这时这些空格就会显示出来
<input type="text" v-model="name"><br />
<pre><span> {{ name }} </span></pre>
v-model.trim就是用来清除这些多余的空格的,当然如果是密码等输入框,请不要加此修饰,有些用户会用空格做密码。
<input type="text" v-model.trim="name"><br />
<pre><span> {{ name }} </span></pre>
这时你无论给它前后加多少空格都会被清除掉。
v-model.number 将用户输入的字符串转换成number
<input type="text" v-model="age"><br />
<span> {{ age }} </span>
这种情况下,你输入的数字会被自动转换成字符串,可以在console中app.age来查看,如果加上.number
<input type="text" v-model.number="age"><br />
<span> {{ age }} </span>
这样就会把你输入的数字转换成number,在console中app.age查看是number类型了。
(2)input type=textarea
v-model在input textarea select中使用,前面我们都是在input的type = text中使用的,在textarea中和它是一样的,唯一区别是这个是多行的。
(3)input type=radio
<!--你的性别是? -->
男:<input v-model="sex" type="radio" value="male">
女:<input v-model="sex" type="radio" value="famale">
<br />
<span> {{ sex }} </span>
<!--这时选中哪个,sex的值就是其value-->
(4)input type=checkbox
<!--你的性取向是:-->
男:<input v-model="sexual_orientation" type="checkbox" value="male">
女:<input v-model="sexual_orientation" type="checkbox" value="famale">
<br />
<span> {{ sexual_orientation }} </span>
<!--在多选时,要把data区中的v-model绑定的属性(sexual_orientation)设置成一个数组。-->
(5)select
<!--你的家乡在哪?-->
<select v-model="from" name="" id="">
<option name="湖北" value="1">湖北</option>
<option name="湖南" value="2">湖南</option>
</select>
<span>{{ from }}</span>
<!--select中也可以多选
你想去哪?-->
<select v-model="from" name="" id="" multiple>
<option name="湖北" value="1">湖北</option>
<option name="湖南" value="2">湖南</option>
<option name="湖南" value="3">河北</option>
<option name="湖南" value="4">河南</option>
</select>
<span>{{ from }}</span>
<!--和checkbox 一样请将data中的v-model绑定的那个属性(from)设置成一个数组-->
elementUI vue v-model的修饰符的更多相关文章
- [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)
preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...
- vue中的.passive修饰符
一.passive作用 详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中 ...
- vue 自定义全局按键修饰符
在监听键盘事件时,我们经常需要检查常见的键值.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: JS部分: Vue.config.keyCodes = { f2:113, } var app ...
- vue.js实战——.native修饰符
https://blog.csdn.net/qq_29468573/article/details/80771625 除了用v-on在组件上监听自定义事件外,也可以监听DOM事件,这时可以用.nati ...
- vue中的.native修饰符
如果你想在某个组件的根元素上绑定事件,直接使用 @click=''function' 是不生效的,我们可以添加.native修饰符 @click.native=''function'',请看以下dem ...
- 030——VUE中鼠标语义修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 029——VUE中键盘语义修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue指令与事件修饰符
一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...
- vue中的事件修饰符
vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...
- 33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- SpringBoot条件注解@Conditional
最近项目中使用到了关于@Conditional注解的一些特性,故写此文记录一下 @Conditional是啥呀? @Conditional注解是个什么东西呢,它可以根据代码中设置的条件装载不同的bea ...
- JavaScript标识符与关键字和保留字
区分大小写 JavaScript中的一切(变量.函数名.操作符)都区分大小写.例如,变量名itbsl和变量名ITbsl是两个不同的变量. 标识符 所谓标识符,就是指变量.函数.属性的名字,或者函数的参 ...
- 【spring boot】idea下springboot打包成jar包和war包,并且可以在外部tomcat下运行访问到(转)
转自:https://www.cnblogs.com/sxdcgaq8080/p/7727249.html 接着上一章走呗:http://www.cnblogs.com/sxdcgaq8080/p ...
- asp.net MVC 上传文件 System.Web.HttpException: 超过了最大请求长度
APS.NET MVC 上传文件出现 System.Web.HttpException: 超过了最大请求长度 这个问题 原因是 默认最大上传文件大小为4096,而我提交的文件太大了. 解决方案:修改 ...
- hashMap的hashCode() 和equal()的使用
hashMap的hashCode() 和equa()的使用 在java的集合中,判断两个对象是否相等的规则是: ,判断两个对象的hashCode是否相等 如果不相等,认为两个对象也不相等,完毕 如果相 ...
- Salesforce Sales Cloud 零基础学习(四) Chatter
Chatter是一个Salesforce实时协作应用程序,它允许你的用户一起工作.互相交谈和共享信息,不管用户角色或位置如何,连接.并激励用户在整个组织内高效工作. Chatter 让用户们在 Opp ...
- TCP/IP 笔记 - 安全
安全:可扩展身份认证协议.IP安全协议.传输层安全.DNS安全.域名密钥识别邮件 任何由用户或以用户账号执行却违背了用户本身意愿的软件被称为恶意软件 网络安全是一门十分广泛及有深度的学识,而本书旨在了 ...
- go使用websocket遇到dial:x509: certificate signed by unknown authority
websocket.DefaultDialer.Dial(url, headers) 改为 websocket.Dialer{TLSClientConfig: &tls.Config{Root ...
- python的Web框架,Django自定义过滤器及标签
代码布局 有的时候框架给的过滤器不够用,需要自定义一些过滤器,所以就需要我们自己来定义一些过滤器等 自定义代码放置的路径 某个app特用(独有)的 - app 目录下的 templatetags文件夹 ...
- 分布式系统监视zabbix讲解一之zabbix安装--技术流ken
zabbix概述 Zabbix是什么 Zabbix 是由Alexei Vladishev创建,目前由Zabbix SIA在持续开发和支持. Zabbix 是一个企业级的分布式开源监控方案. Zabbi ...