Vue 自定义局部指令

局部指令的基本语法：

directives:{focus:{//指令的定义inserted:function(el){el.focus()}}
}

在Vue实例中添加directives

具体实现的代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>局部指令</title></head><body><div id="app"><input type="text" v-color="msg" /></div><script src="vue.js"></script><script>const vm = new Vue({el: "#app",data: {msg: {color: "red",},},directives: {color: {bind: function (el, binding) {el.style.backgroundColor = binding.value.color;},},},});</script></body>
</html>

局部指令只在所定义的组件中使用。