在组件上使用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章-武技-常见组件上三路 后记 如果有错误, 欢迎指正. 有好的补充, 和疑问欢迎交流, 一块提高. 在此谢谢大家了.
随机推荐
- Nginx虚拟主机配置(三)
虚拟主机就是使用特殊的软硬件技术,把一台计算机主机分成多台“虚拟”的主机,每一台虚拟主机都具有独立的域名和IP地址(或共享的IP地址),具有完整的Internet服务器功能.在同一台硬件.同一个操作系 ...
- zz1998_Efficient Backprop笔记
1998_Efficient Backprop笔记 A few practical tricks 1. Stochastic vs Batch learning 在最小值附近震荡的幅度与学习速率成比例 ...
- Codeforces Round #609 (Div. 2) 题解
Equation Modulo Equality Long Beautiful Integer Domino for Young K Integers Equation \[ Time Limit: ...
- [RN] React Native 错误 Module does not exist in the module map
React Native 错误 Module does not exist in the module map 代码如下: import Login from 'login' import Index ...
- CF908G New Year and Original Order(DP,数位 DP)
又一次降智…… (数位 DP 原来可以写这么短,学到了) 问题可以转化为求数位中 $\ge k$ 的有恰好 $j$ 位的数的个数.设为 $c_{j,k}$. 那么答案就是:(考虑把 $k$ 的贡献拆开 ...
- [LeetCode] 894. All Possible Full Binary Trees 所有可能的满二叉树
A full binary tree is a binary tree where each node has exactly 0 or 2 children. Return a list of al ...
- [LeetCode] 880. Decoded String at Index 在位置坐标处解码字符串
An encoded string S is given. To find and write the decoded string to a tape, the encoded string is ...
- [LeetCode] 379. Design Phone Directory 设计电话目录
Design a Phone Directory which supports the following operations: get: Provide a number which is not ...
- AtCoder Grand Contest 039 简要题解
从这里开始 比赛目录 Problem A Connection and Disconnection 简单讨论即可. Code #include <bits/stdc++.h> using ...
- JVM系列之四:运行时数据区
1. JVM架构图 Java虚拟机主要分为五大模块:类装载器子系统.运行时数据区.执行引擎.本地方法接口和垃圾收集模块. 2. JDK1.7内存模型-运行时数据区域 根据<Java 虚拟机规范( ...