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 RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 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
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
JQUERY获取form表单值的代码
2010/07/17 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
从vue源码看props的用法
2019/01/09 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
python如何将图片转换素描画
2020/09/08 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
单位政审意见范文
2015/06/04 职场文书
农村婚庆主持词
2015/06/29 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
团队拓展训练感想
2015/08/07 职场文书
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript