(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的更多相关文章

  1. 组件上使用v-model

    组件上使用v-model <input v-model="searchText"> 等价于 <input v-bind:value="searchTex ...

  2. vue 学习六 在组件上使用v-model

    其实这个部分应该是属于component,为什么把这玩意单独拿出来呢,原因是它这个东西比较涉及到了vue的事件,以及v-model指令的使用,还是比较综合的.所以就拿出来啦 父组件 <templ ...

  3. 使用commons-fileUpload组件上传文件

    在近期的一个项目中有用到commons-fileUpload组件进行实现文件上传的功能(由于没用到框架),在使用的过程中有遇到一些问题,经过自己的琢磨也算顺利地将其解决了,在这里做个记录. 一.com ...

  4. asp 文件上传(ASPUpload组件上传)

    要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload   要实现该功能,就要利用一些特制的文件上传组件 ...

  5. EasyUI 关于IE使用window组件上传文件

    有时候IE会对使用window组件上传文件(第二次)不生效,解决方案是: 将该window每次打开的时候,使用: $('#adUploadWindow').window('refresh', 'pan ...

  6. 前台利用jcrop做头像选择预览,后台通过django利用Uploadify组件上传图最终使用PIL做图像裁切

    之前一直使用python的PIL自定义裁切图片,今天有需求需要做一个前端的选择预览页面,索性就把这个功能整理一下,分享给大家. 实现思路: 1.前端页面: 用户选择本地一张图片,然后通过鼠标缩放和移动 ...

  7. django Form组件 上传文件

    上传文件 注意:FORM表单提交文件要有一个参数enctype="multipart/form-data" 普通上传: urls: url(r'^f1/',views.f1), u ...

  8. vue里在自定义的组件上定义的事件

    事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...

  9. vue2进阶之v-model在组件上的使用

    v-model 用在 input 元素上时 v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model,但是 Vue 是单项数据流,v-model 只是语法糖而已: <in ...

  10. C后端设计开发 - 第6章-武技-常见组件上三路

    正文 第6章-武技-常见组件上三路 后记 如果有错误, 欢迎指正. 有好的补充, 和疑问欢迎交流, 一块提高. 在此谢谢大家了.

随机推荐

  1. Long型转化成BigDecimal

    Long转成带小数的,最好使用BigDecimal,而不是double. 以下例子,是将long型转化成BigDecimal,这样容易保持精度. public class Test { public ...

  2. 在IT的路上,我在成长

    在IT的路上,我在成长.很荣幸地加入了博客园这个大家庭. 岁月的航船在不断航行,在成长的脚印我要深深留下,回首已往经历,发现自己成长的路上,将来也会有很多美好的回忆,以及丰硕的果实.

  3. php 分析Session无效的原因

    Session在开发中是非常重要的一个数据存储变量了,它可以实现不同页面之间的传值了,下面我们来为各位介绍在使用Session时碰到过期无效的一些问题吧. PHP开发过程中,可能有朋友经常会遇到Ses ...

  4. HDU 4635 Strongly connected (强连通分量)

    题意 给定一个N个点M条边的简单图,求最多能加几条边,使得这个图仍然不是一个强连通图. 思路 2013多校第四场1004题.和官方题解思路一样,就直接贴了~ 最终添加完边的图,肯定可以分成两个部X和Y ...

  5. 【 D3.js 高级系列 — 1.1 】 封装文本自动换行

    在[高级 - 第 1.0 章]中讲解了在 SVG 中如何配合使用 text 和 tspan 来实现换行的功能,本文对此功能进行一下封装,以后就可以直接用了. 1. 引用 js 文件 下载地址:mult ...

  6. Scala学习之for 循环和 yield 的例子

    for循环中的 yield 会把当前的元素记下来,保存在集合中,循环结束后将返回该集合.Scala中for循环是有返回值的.如果被循环的是Map,返回的就是Map,被循环的是List,返回的就是Lis ...

  7. C语言之字符串

    什么是字符串:使用双引号包含的字符序列. 简单的字符串"hello world" 一个'h'是一个字符 很多个字符组合在一起就是字符串了 字符串与字符数组 在C语言中没有专门的字符 ...

  8. Xilinx FPGA 移位寄存器IP延时问题

    软件版本:Vivado2016.1 在使用移位寄存器IP时,对于不同延时拍数的使能延时可能会有问题. (1)32深度的可变长度移位寄存器,IP生成界面如下图所示. (2)128深度的可变长度移位寄存器 ...

  9. Linux 任务计划 crontab 配置概要与常见问题

    Linux 可以利用 crontab 来实现定时任务,自动化操作.本文对此进行简要说明. crontab 操作示例 列出定时任务   crontab -l #列出所有的定时任务,如果没有定时任务,返回 ...

  10. SpringBoot整合全局异常处理&amp;SpringBoot整合定时任务Task&amp;SpringBoot整合异步任务

    ============整合全局异常=========== 1.整合web访问的全局异常 如果不做全局异常处理直接访问如果报错,页面会报错500错误,对于界面的显示非常不友好,因此需要做处理. 全局异 ...