在组件上使用v-model
(1)
等价于:
其中$event.target.value表示获取输入框的值。
(2)当用在组件上时,v-model 则会这样:
其中$event表示$emit抛出的值,即$emit的第二个参数。
(3)将(2)写成代码为:
Vue.component('custom-input', {
props: ['value'],
template: ‘
<input
v-bind:value="value" //"value"对应props里面的value
v-on:input="$emit('input', $event.target.value)"
>
’
})
使用方式:
在组件上使用v-model的更多相关文章
- 组件上使用v-model
组件上使用v-model <input v-model="searchText"> 等价于 <input v-bind:value="searchTex ...
- vue 学习六 在组件上使用v-model
其实这个部分应该是属于component,为什么把这玩意单独拿出来呢,原因是它这个东西比较涉及到了vue的事件,以及v-model指令的使用,还是比较综合的.所以就拿出来啦 父组件 <templ ...
- 使用commons-fileUpload组件上传文件
在近期的一个项目中有用到commons-fileUpload组件进行实现文件上传的功能(由于没用到框架),在使用的过程中有遇到一些问题,经过自己的琢磨也算顺利地将其解决了,在这里做个记录. 一.com ...
- asp 文件上传(ASPUpload组件上传)
要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload 要实现该功能,就要利用一些特制的文件上传组件 ...
- EasyUI 关于IE使用window组件上传文件
有时候IE会对使用window组件上传文件(第二次)不生效,解决方案是: 将该window每次打开的时候,使用: $('#adUploadWindow').window('refresh', 'pan ...
- 前台利用jcrop做头像选择预览,后台通过django利用Uploadify组件上传图最终使用PIL做图像裁切
之前一直使用python的PIL自定义裁切图片,今天有需求需要做一个前端的选择预览页面,索性就把这个功能整理一下,分享给大家. 实现思路: 1.前端页面: 用户选择本地一张图片,然后通过鼠标缩放和移动 ...
- django Form组件 上传文件
上传文件 注意:FORM表单提交文件要有一个参数enctype="multipart/form-data" 普通上传: urls: url(r'^f1/',views.f1), u ...
- vue里在自定义的组件上定义的事件
事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...
- vue2进阶之v-model在组件上的使用
v-model 用在 input 元素上时 v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model,但是 Vue 是单项数据流,v-model 只是语法糖而已: <in ...
- C后端设计开发 - 第6章-武技-常见组件上三路
正文 第6章-武技-常见组件上三路 后记 如果有错误, 欢迎指正. 有好的补充, 和疑问欢迎交流, 一块提高. 在此谢谢大家了.
随机推荐
- React 借助pubsub-js进行兄弟组件的传递值
1===> raect中两个 兄弟组件 互相通信使用的技术 使用 消息订阅(subscribe)和发布(publish)机制 s儿 伯 s rai b pʌ b lɪ ʃ 有一个库可以处理 Pu ...
- jq中
1.jquery位置信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 201871010110-李华《面向对象程序设计(java)》第十四周学习总结
博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...
- python字符串的split replace strip
split replace strip是字符串中内置的三个函数,作用分别是分割 替换 去空格 0x01:split split(a,b):用指定的字符(a)分割字符串,可以限制分割的次数(b),返回一 ...
- django学习-数据库配置-创建模型
数据库配置 在mysite/settings.py中,包含了django项目设置的python模块 通常,这个配置文件使用SQLite作为默认数据库.如果你不熟悉数据库,或者只是想尝试下django, ...
- MySQL数据库 外键,级联, 修改表的操作
1.外键: 用来建立两张表之间的关系 - 一对多 - 多对多 - 一对一 研究表与表之间的关系: 1.定义一张 员工部门表 id, name, gender, dep_name, dep_desc - ...
- Git安装(一)
1. 下载Git 官网地址:https://git-scm.com/downloads 这里选择下载Git-2.23.0-64-bit.exe 2. 安装 安装完成
- 微信小程序 - 支付(后端代码实现)
小程序支付 业务流程时序图 官方文档 步骤: 1. Openid 在小程序初次加载的时候就已经获取(详情见 小程序登录) 2. 生成商户订单 1.商品信息由小程序端提供 2.提供支付统一下单接口所需参 ...
- gradle-在一个模块中引入其它模块
现在有两个项目pet-api和pet-provider,这两个项目都在pet-parent当中,项目结构如下: 现在要在pet-provider中调用pet-api 先在parent中的setting ...
- nginx使用多端口监听多个服务
###### nginx监听多个端口并转发给不同的服务 ### 第一个监听: upstream odoo { server localhost:; } upstream odoochat{ serve ...