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 相关文章推荐
JQuery jsonp 使用示例代码
Aug 12 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
layui表格设计以及数据初始化详解
Oct 26 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 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
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
Bootstrap表单布局
2016/07/19 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
python通过索引遍历列表的方法
2015/05/04 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
简单谈谈python中的语句和语法
2017/08/10 Python
python实现二分查找算法
2017/09/21 Python
Numpy之文件存取的示例代码
2018/08/03 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
办理暂住证介绍信
2014/01/11 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
Python实现生活常识解答机器人
2021/06/28 Python
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android