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?應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化，這篇文章主要介紹了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主要用于代碼規(guī)范、統(tǒng)一代碼風格,下面這篇文章主要給大家介紹了關于vue3配置ESLint的相關資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01