(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. Rust中的错误处理

    Result & Panic 这次讲得详细,从错误的来历及简写过程, 都写明白了, 先浅,再深,先深,再浅, 反复之, 学习王道~ use std::fs::File; //use std:: ...

  2. JS高阶---对象创建模式(5种)

    [前言] 函数高级部分先看到这里,接下里看下面向对象高级部分 .对象创建模式 .继承模式 [主体] (1)Object构造函数模式 案例如下: 测试结果如右图所示 (2)对象字面量形式创建 案例如下: ...

  3. 吴丽丽-201871010123《面向对象程序设计(Java)》第七周学习总结

    吴丽丽-201871010123<面向对象程序设计(Java)>第七周学习总结 项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个 ...

  4. 04-numpy-笔记-transpose

    借鉴代码https://blog.csdn.net/xiongchengluo1129/article/details/79017142 吐槽一下CSDN的垃圾广告.. 这是转置,所以1维(向量)和2 ...

  5. cf 1182 E - Product Oriented Recurrence

    当时脑残了, 不会写矩阵快速幂中更改的系数, 其实把他扔到矩阵里同时递推就好了 #include<cstdio> #include<algorithm> #include< ...

  6. PKUWC2020游记

    PKUWC2020在2019年举行是真的沙雕 晚个两星期我就能逃掉期末考了 Day \(-\infty\) 开始停课训练,和ntf.lzy一起. atcoder真好玩,只可惜我没脑子-- kenkoo ...

  7. Gogs配置(本地安装篇-Debian)

    知识储备: 用过MySQL等 了解Linux最基本的操作 git常用操作 关于ssh 本文参考:linux上安装gogs搭建个人仓库 下载 https://github.com/gogs/gogs/r ...

  8. TJOI 2015 概率论(生成函数)

    题意 ​ 求一棵随机生成的有根二叉树(节点无标号,各种不同构的情况随机出现)叶子结点个数的期望. 思路 ​ 用生成函数做是个好题. ​ 我们考虑设 \(n\) 个节点,所有不同构二叉树叶子结点的总和为 ...

  9. js 为url字符串添加、修改参数

    //为url字符串添加.修改参数 String.prototype.EditUrlParam = function (paramName, replaceWith) { var url = this; ...

  10. 二进制安装K8S集群V1.16.3

    centos linux7.5 cat > /etc/hosts << EOF 192.168.199.221 master 192.168.199.222 node1 192.16 ...