/** * 相对时间指令 */ Vue.directive('relative-time', { bind: function (el, binding) { el.innerHTML = Time.transform(binding.value); el._relativeTime = setInterval(function () { el.innerHTML = Time.transform(binding.value); }, 60000);//每分钟，刷新一次 }, unbind: function (el) { clearInterval(el._relativeTime); delete el._relativeTime; } }); var app = new Vue({ el: '#app', data: { now: (new Date()).getTime(), //2019/1/5 22:02:02 before: 1546696922000 } });
在相对时间指令中，我们在 bind() 中，把指令中的入参转换为相对时间，然后写入指令所在的元素中，接着还定义了一个每分钟更新元素内容的定时器。在 unbind() 中，执行清除定时器操作。
渲染结果：
编写自定义指令，建议如下：
在 bind() 中定义初始化操作，比如绑定一次性事件。
在 unbind() 中定义解绑与删除操作。
虽然可以在自定义指令中任意操作 DOM，但这就不是数据驱动 DOM 啦，所以遇到这样的场景，建议使用组件来满足业务要求。