在组件上使用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章-武技-常见组件上三路 后记 如果有错误, 欢迎指正. 有好的补充, 和疑问欢迎交流, 一块提高. 在此谢谢大家了.
随机推荐
- node知识
node中的url url中的方法: parse,resolve,format: 方法parse: 例子:url.parse('http://imooc.com/course/list'); 结果:{ ...
- Maven 中 dependencyManagement 元素,知识点
Maven 提供的 dependencyManagement 元素既能让子模块继承到父模块的依赖配置,又能保证子模块依赖使用的灵活性.在 dependencyManagement 元素下的依赖声明不会 ...
- 创建maven父子项目(九)
一.父子-聚合项目 通过 maven 可以创建父子-聚合项目. 所谓的父子项目,即有一个父项目,有多个子项目.这些子项目,在业务逻辑上,都归纳在这个父项目下,并且一般来说,都会有重复的jar包共享.所 ...
- 页面元素定位及操作--xpath
简介: 在 XPath 中,有七种类型的节点:元素.属性.文本.命名空间.处理指令.注释以及文档(根)节点.XML 文档是被作为节点树来对待的.树的根被称为文档节点或者根节点. /xxx 页面输出 / ...
- 数据结构——顺序表(sequence list)
/* sequenceList.c */ /* 顺序表 */ /* 线性表的顺序存储是指在内存中用地址连续的一块存储空间顺序存放线性表中的各项数据元素,用这种存储形式的线性表称为顺序表. */ #in ...
- ZROI 暑期高端峰会2019 总结
FBI Warning:以下博客含有 FBI Warning 的都是包含大量人类本质之一的. 前几天听课: Day1 组合计数 Day1 序列数据结构 Day2 线性代数 Day3 图论 Day3 字 ...
- WPF CoboxItem控件使用SelectedItem去调System.Windows.Controls.ComboBoxItem: 前缀方法
textComBox.SelectedItem as ComboBoxItem).Content textConbox: 控件Combobox 的Name 在Combobox控件SelectionCh ...
- 慕课网springboot博客系统开发(一)----spring initializr的使用 gradle构建项目
spring initializr工具的地址:https://start.spring.io/:通过它可以很方便的创建springboot项目 这里我们选择使用gradle作为项目的构建工具,此spr ...
- spring( 二 ) DispatcherServlet
参考文档: https://blog.csdn.net/sjjsh2/article/details/53054203 https://blog.csdn.net/w214019153/article ...
- Vue.js项目中使用iconfont冲突问题解决
在开发前端项目中,字体图标变得越来越常用.一方面因为它比图片使用起来方便,可以像字体一样修改大小和颜色:另一方面是因为它可以减少请求数量,优化前端性能. iconfont的使用方法很简单,主要由三种引 ...