前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue directive中修改v-model值

Vue directive中修改v-model值

作者头像
javascript.shop
发布于 2019-11-13 05:57:25
发布于 2019-11-13 05:57:25
2.9K00
代码可运行
举报
文章被收录于专栏:杰的记事本杰的记事本
运行总次数:0
代码可运行

最近在重构一个旧项目,这个项目用到了一些bootstrap的插件,我们想保留这些插件,就会遇到一些问题,比如我们把插件封装成了directive,在双向绑定方面需要做如下处理:

  1. <div v-custom= “customData”>Test</div> , 我们想要在directive中,对customData进行改变,可以使用 vnode.context[binding.expression]进行赋值即可,如下例子:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 Vue.directive("custom", {
  bind: function(element, binding, vnode) {
    $(element).on("click", function() {
      vnode.context[binding.expression] = false; // sync binding.value = false;
    });
  }
});

2. <input v-model=”customValue” v-custom= “customData”></> , 我们知道v-model其实是input事件改变value的语法糖,所以我们想要在directive中对v-model进行改变,可以使用dispatchEvent(‘input’)的方法,如下例子:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 // 这个函数是从vue.js源码中复制的,方便我们手动触发事件
function trigger(el, type) {
    var e = document.createEvent("HTMLEvents");
    e.initEvent(type, true, true);
    el.dispatchEvent(e);
  }
 Vue.directive("custom", {
  bind: function(element, binding, vnode) {
    $(element).on("focus", function() {
       element.value = 'FOCUS';
       trigger(element, "input");
    });
   }
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年11月13日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
js中compositionstart和compositionend事件
最近有个需求,根据input输入的文字进行列表过滤。这是个很常见的需求。于是大致的代码如下:
Daotin
2022/05/09
2.2K0
petite-vue源码剖析-双向绑定`v-model`的工作原理
双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on,而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提供存储非字符串值的能力。
PHP开发工程师
2022/03/15
8650
vue实战-完全掌握Vue自定义指令
作为使用Vue的开发者,我们对Vue指令一定不陌生,诸如v-model、v-on、v-for、v-if等,同时Vue也为开发者提供了自定义指令的api,熟练的使用自定义指令可以极大的提高了我们编写代码的效率,让我们可以节省时间开心的摸鱼~
yyds2026
2022/10/17
8550
vue自定义指令
vue除了提供了v-model、v-show、v-if等默认指令,还允许注册了自定义指令。比如在需要对DOM元素进行底层操作的时候,就会用到自定义指令。
用户3258338
2019/07/19
6540
vue自定义指令
【Vue原理】VModel - 源码版之input详解
上一篇文章,我们大概讲了所有表单元素的双绑原理,但是仍然有两个特殊的表单元素,是要多更多处理的,也不可能放在一篇文章说完,今天,我们说的是 input 的特殊处理的地方
神仙朱
2019/08/02
9620
【Vue原理】VModel - 源码版之input详解
写过自定义指令吗,原理是什么?
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:
bb_xiaxia1998
2022/10/03
3490
翻了翻element-ui源码,发现一个很实用的指令clickoutside
指令(directive)在 vue 开发中是一项很实用的功能,指令可以绑定到某一元素或组件,使功能的颗粒度更精细。今天在翻 element-ui 的源码时,发现一个还挺实用的工具指令,跟大伙分享一下。
WahFung
2020/10/26
2.6K0
翻了翻element-ui源码,发现一个很实用的指令clickoutside
分享8个非常实用的Vue自定义指令
链接:https://segmentfault.com/a/1190000038475001
coder_koala
2021/01/06
1.6K0
Vue.js-自定义指令 原
除了默认设置的核心指令(v-model 和v-show),Vue也允许注册自定义指令。注意在Vue2.0里面,代码复用的主要形式和抽象是组件--然而,有的情况下,你 仍然需要对纯DOM元素进行底层操作,这时候就会用到自定义指令。下面这个例子将聚焦一个input元素,像这样在页面加载时,元素将获得焦点(注意,autofocus在移动版Safari上不工作),事实上,你访问后还没点击任何内容,input就获得了焦点,现在让我们完善这个指令:
tianyawhl
2019/04/04
8870
Vue学习笔记③
​ 若:<input type="text"/>,则v-model收集的是value值,用户输入的就是value值。
ymktchic
2022/01/18
9880
Vue学习笔记③
Vue源码再读
一些高频用法及技术点:类,函数柯里化,递归, Object.create,Object.defineProperty,macrotask,microtask,AST,vnode,相关知识点请自行查阅,本文主要从源码角度分析各个关键点的实现
醉酒鞭名马
2020/04/29
1.7K2
Vue源码再读
Vue如何创建自定义指令?
什么是vue指令了? Vue自带的指令很多,v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text... 原来这就是指令。
Javanx
2019/09/04
1.9K0
Vue如何创建自定义指令?
vue初
指令总结 v-bind 可以绑定属性,包括class style,而已省略,使用:替代 在1vue.0中有三种修饰符,.sync,.once,.camel,在2.0中能够废弃了前面两个 .camel将绑定的特性的名称转化为驼峰法则命名
河湾欢儿
2018/09/06
1.1K0
vue源码分析-v-model的本质
由于v-model和前面介绍的插槽,事件一致,都属于vue提供的指令,所以我们对v-model的分析方式和以往大同小异。分析会围绕模板的编译,render函数的生成,到最后真实节点的挂载顺序执行。最终我们依然会得到一个结论,v-model无论什么使用场景,本质上都是一个语法糖。
yyzzabc123
2022/10/18
1K0
牛逼!表单自动格式化
今天,了不起发现了一个非常有用的宝藏插件:Cleave.js。提供一个简单的方法来格式化您的输入数据,以此增加输入字段的可读性。让你的页面表单使用体验感爆棚~
程序员老鱼
2023/10/25
2630
牛逼!表单自动格式化
八.自定义命令
本文最后更新于 871 天前,其中的信息可能已经有所发展或是发生改变。 使用自定义命令 <label >搜索名字关键字:<input type="text" v-model="keyWord" v-focus v-color="'green'"></label> 定义全局自定义命令 Vue.directive('focus', { //钩子函数 bind: function (el) { // 每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次 // 注意: 在每
Yuyy
2022/06/28
3090
开心档之Vue教程2
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。
iOS程序应用
2023/04/17
3570
开心档之Vue教程2
开心档之Vue教程2
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。
爱学iOS的小麦子
2023/03/02
4760
当使用 jquery 插件操作 input 时同步 vue 中绑定的变量办法
为什么要同步到 vue 上绑定的变量呢,因为如果我们不更新绑定的变量的值,vue 下次刷新组件的时候,就会将旧的值更新到 input 上。
前Thoughtworks-杨焱
2022/02/19
1.9K0
Vue第三天
小城故事
2024/08/24
1000
相关推荐
js中compositionstart和compositionend事件
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验