热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

vue中自定义指令改变data中的值

这篇文章主要介绍了vue中自定义指令改变data中的值,非常不错,具有参考借鉴价值,需要的朋友可以参考下

通过局部自定义指令实现了一个拖动的指令

html:

script:

methods:{
set(x,y){
this.data.x=x;
this.data.y=y;
}
},
directives:{
// 拖动的自定义指令
drag(el,binding){
//el为拖动的元素
var oDiv =el;
 oDiv.Onmousedown= function(e){
  e.preventDefault();
     e.stopPropagation();
  var disX = e.offsetX;
  var disY = e.offsetY;
  document.Onmousemove= function(e){
  e.preventDefault();
e.stopPropagation();
  var x=e.pageX-disX;
  var y=e.pageY-disY
   oDiv.style.left=x
oDiv.style.top=y
  // 通过传参的形式,将methods中的函数传进来,以此来改变data中的值
  binding.value.set(x,y)
  };
  document.Onmouseup= function(){
  document.Onmousemove=null;
  document.Onmouseup=null;
  };
 };
}
},

以上所述是小编给大家介绍的vue 中自定义指令改变data中的值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 本文详细介绍了JSP(Java Server Pages)的九大内置对象及其功能,探讨了JSP与Servlet之间的关系及差异,并提供了实际编码示例。此外,还讨论了网页开发中常见的编码转换问题以及JSP的两种页面跳转方式。 ... [详细]
  • 本文介绍了在 C# 中使用 XPath 语法同时选择 HTML 元素的多个属性的具体方法,并解决了相关的问题。 ... [详细]
  • 本文介绍了如何通过ARM编译器组件重定向标准C运行时库的I/O函数,以适应不同的硬件平台。原文链接:https://www.keil.com/pack/doc/compiler/RetargetIO/html/retarget_overview.html ... [详细]
  • 交互式左右滑动导航菜单设计
    本文介绍了一种使用HTML和JavaScript实现的左右可点击滑动导航菜单的方法,适用于需要展示多个链接或项目的网页布局。 ... [详细]
  • 本文详细介绍如何在 Windows 环境下安装 Ubuntu 12.04 版本的 Linux 操作系统,包括必要的软件下载、配置步骤以及注意事项。 ... [详细]
  • 本文深入探讨了JavaScript中循环结构的使用方法,特别是While循环,用于重复执行一段代码直到特定条件不再满足。同时,文章还介绍了Switch语句在多条件分支选择中的应用。 ... [详细]
  • 随着技术社区的发展,越来越多的技术爱好者选择通过撰写博客来分享自己的学习经验和项目进展。本文将介绍一个具体案例,即将一套原本运行于Windows平台的代码成功移植到Linux(Redhat)环境下的过程与挑战。 ... [详细]
  • 深入解析IGMP各版本特性及其演进
    本文详细探讨了Internet组管理协议(IGMP)的不同版本,包括IGMPv1的基础功能、IGMPv2的增强特性和IGMPv3的重要改进。特别分析了IGMPv3如何支持特定源组播(SSM)模型,并介绍了各版本之间的主要差异。 ... [详细]
  • JESD204C 入门:第2部分新特性及其内容
    本文内容来自ADI的技术文章,作者:DelJones原网址为:https:www.analog.comcnanalog-dialoguea ... [详细]
  • 在Windows Server 2008 R2上配置IIS FTP服务
    本文详细介绍了如何在Windows Server 2008 R2操作系统上通过IIS配置FTP服务的过程,包括服务器角色的选择与安装、FTP站点的创建以及必要的服务和防火墙设置检查。 ... [详细]
  • 本文提供了在 Kali Linux 2020.01 x64 版本上安装 Docker 的详细步骤,包括环境准备、使用清华大学镜像源、配置 APT 仓库以及安装过程中的常见问题处理。 ... [详细]
  • 本文旨在分享HTML标签整理的经验,帮助读者更好地理解和应用HTML标签,提升前端开发的专业性和语义化水平。 ... [详细]
  • YB02 防水车载GPS追踪器
    YB02防水车载GPS追踪器由Yuebiz科技有限公司设计生产,适用于车辆防盗、车队管理和实时追踪等多种场合。 ... [详细]
  • Java与JSON互转:实现JSON到Java对象及Java对象到JSON的转换
    本文详细介绍了如何在Java中实现JSON数据与Java对象之间的相互转换,包括代码示例和常见问题解决方法。 ... [详细]
  • Ubuntu GamePack:专为游戏爱好者打造的Linux发行版
    随着Linux系统在游戏领域的应用越来越广泛,许多Linux用户开始寻求在自己的系统上畅玩游戏的方法。UALinux,一家致力于推广GNU/Linux使用的乌克兰公司,推出了基于Ubuntu 16.04的Ubuntu GamePack,旨在为Linux用户提供一个游戏友好型的操作环境。 ... [详细]
author-avatar
会员WWW
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有