vue 中自定义指令改变data中的值
时间:2019-03-30
本文章向大家介绍vue 中自定义指令改变data中的值,主要包括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中的值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux程序安装及包管理
- Mysql存储引擎
- CentOS7-samba文件共享服务
- centos7-vsftpd文件服务器
- Mysql的逻辑架构
- centos7-httpd服务器
- Linux文件 目录与权限
- 简易数据分析(三):Web Scraper 批量抓取豆瓣数据与导入已有爬虫
- 嵌入式Linux开发环境搭建 配置Ubuntu
- 简易数据分析(五):Web Scraper 翻页、自动控制抓取数量 & 父子选择器
- 【深度】韦东山:一文看看尽linux对中断处理的前世今生
- 嵌入式开发之交叉编译程序万能命令_以freetype为例
- Python-EEG处理和事件相关电位(ERP)
- 嵌入式Linux开发 配置网络
- 问号脸:为什么 Java 中 “1000==1000” 为 false,而 ”100==100“ 为 true?