vue自定义一个v-model的实现代码


Posted in Javascript onJune 21, 2018

目标

<template>
  <my-form v-model="form">
  </my-form>
</template>
<script>
  export default {
    data() {
      return {
        form: ''
      }
    }
  }
<script>

实现

// my-form组件
<template>
  <form>
    <input v-model="model.val1" />
    <textarea v-model="model.val2"></textarea>
  <form>
</template>
<script>
  export default {
    model: {
      prop: 'model',
      event: 'change'
    },
    props: {
      model: Object
    }
    watch: {
      model(val){
        this.$emit('change', val)
      }
    }
  }
<script>

总结

以上所述是小编给大家介绍的vue自定义一个v-model的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
微信小程序实现刷脸登录
May 25 Javascript
实用的Vue开发技巧
May 30 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 #Javascript
浅析Vue 生命周期
Jun 21 #Javascript
vue数组对象排序的实现代码
Jun 20 #Javascript
vue项目实现github在线预览功能
Jun 20 #Javascript
node thread.sleep实现示例
Jun 20 #Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 #Javascript
Vue.use源码学习小结
Jun 20 #Javascript
You might like
Protoss魔法科技
2020/03/14 星际争霸
php5新改动之短标记启用方法
2008/09/11 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
PHP crc32()函数讲解
2019/02/14 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
玩转python爬虫之URLError异常处理
2016/02/17 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
Python读取yaml文件的详细教程
2020/07/21 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
乡下人家教学反思
2014/02/01 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
继承公证书格式
2015/01/26 职场文书
违纪开除通知书
2015/04/25 职场文书
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers