vue 中自定义指令改变data中的值
更新时间：2017年06月02日 16:07:15 作者：qq_38761664
这篇文章主要介绍了vue 中自定义指令改变data中的值,非常不错，具有参考借鉴价值，需要的朋友可以参考下
通过局部自定义指令实现了一个拖动的指令
html:
<div style="position:absolute;width:100px;height:100px;border:1px solid red" v-drag="{set:set}"></div>
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中的值，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了VueCli3.0中集成MockApi的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，这篇文章主要介绍了Vue 中 store 基本用法,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue+Mock.js模拟登录和表格的增删改查功能,需要的朋友可以参考下2018-07-07
本文主要介绍了electron最小化托盘设置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要为大家介绍了绘制flowable 流程图的Vue 库使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
安装@vue/cli 报错npm WARN deprecated request
这篇文章主要介绍了安装@vue/cli 报错npm WARN deprecated request@2.88.2问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要给大家介绍了关于Vue组件通信的四种方式，分别是父子组件通信、非父子组件的eventBus通信、利用localStorage或者sessionStorage以及利用Vuex等方法，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2018-02-02
这篇文章主要介绍了vue中(el-button的五种类型，三种css格式)具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue+element遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
ESLint主要用于代码规范、统一代码风格,下面这篇文章主要给大家介绍了关于vue3配置ESLint的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
最新评论