vue3 自定义指令——迹忆客-ag捕鱼王app官网

除了默认设置的核心指令( v-model 和 v-show ), vue 也允许注册自定义指令。

下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

    
页面载入时，input 元素自动获取焦点：
    

 

我们也可以在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用：

    
页面载入时，input 元素自动获取焦点：
    

 

有时候我们不需要其他钩子函数，我们可以简写函数，如下格式：

vue.directive('runoob', function (el, binding) {
  // 设置指令的背景颜色
  el.style.backgroundcolor = binding.value.color
})

指令函数可接受所有合法的 javascript 表达式，以下实例传入了 javascript 对象：

实例