这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
这篇文章主要介绍了 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 中的值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0811/338878.html