(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. Grafana中mysql作为数据源的配置方法

    需求 近期在使用python写一套模拟API请求的监控项目,考虑数据可视化这方面就采用grafana来呈现,下面来看看怎么弄. 数据源准备 首先安装好mysql,将监控的日志数据写入到mysql之中. ...

  2. Python类的使用总结

    Python是一个面向对象的解释型语言,所以当然也有类的概念.在Python中,所有数据类型都可以视为对象,当然也可以自定义对象.自定义的对象数据类型就是面向对象中的类(Class)的概念.之前接触类 ...

  3. 关于setImageURI out of memory的一些解决办法

    http://stackoverflow.com/questions/477572/strange-out-of-memory-issue-while-loading-an-image-to-a-bi ...

  4. day13_7.15 迭代器和生成器

    1.迭代器 迭代就是一个更新换代的过程,每次迭代都必须基于上一次的结果. 迭代器就是迭代取值的工具.举个例子: while True: print('循环输出') 此代码会无限循环输出文字,是个死循环 ...

  5. springboot整合邮件

    一.邮件相关知识补充 SMTP(Simple Mail Transfer Protocol) 即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式.SMTP协议属 ...

  6. Maven仓库与坐标(五)

    一.Maven仓库 存放依赖的一个位置/文件夹/仓库,分为以下几种: 本地仓库 中央仓库 远程仓库 1. 本地仓库 第一次执行maven命令时被创建,maven运行时需要的构件都从本地仓库获取,本地仓 ...

  7. Django项目中出现的错误及解决办法(ValueError: Dependency on app with no migrations: customuser)

    写项目的时候遇到了类似的问题,其实就是没有生成迁移文件,执行一下数据库迁移命令就好了 ValueError: Dependency on app with no migrations: customu ...

  8. 学习:API断点和条件记录断点和内存断点的配合

    前言:感觉可能与之前有点相同,主要是介绍shark恒老师说的一种断点方法,结合了API和条件记录进行下断点 适用条件:当我们利用简单的WINDOWS API函数如MessageBoxW/A 又或者获取 ...

  9. 【未完成】【plsql】与oracle配置

    待写——————————————————————————————————————-

  10. KDE 上 任务栏 图标位置更改

    任务栏上图标是不能直接拖拽的. 右键点任务栏,选[Panel Options -> Panel Settins]之后,就可以拖拽了. 完成之后,按X就行了.