vue自定义指令和计算属性

自定义指令

Vue 自带的指令无法满足开发需求，这时需要自定义一些指令。指令可以注册为全局指令或者局部指令。全局指令使用 Vue 对象下的 directive 方法定义，局部指令在 Vue 实例中设置 directives 属性。

如下代码所示：

// 注册为全局指令
Vue.directive('focus', {
   
    inserted: function (el) {
   
        // 获取焦点事件
        el.focus()
    }
})

// 注册为局部指令
let vm = new Vue({
   
    el: '.container',
    directives: {
   
        focus: {
   
            inserted: function (el) {
   
                // 调用触发该指令元素的 focus 属性，获取焦点
                el.focus()
            }
        }
    }
})

在定义指令时无需使用 v- 作为前缀，在调用指令时，需要添加 v- 前缀。

有参数的自定义指令

如果自定义的指令中需要传递参数，那么在 inserted 后面函数的形参中设置多个值，其中第一个值为绑定该指令的元素，第二个值为传递的参数。若想要获取第二个参数中的值，需要调用该参数的 value 属性，如下代码所示：

Vue.directive('bg_color', {
   
    // 函数中接收两个参数，第一个参数为触发该指令的元素，第二个参数为该指令中传递的参数
    inserted: function (el, obj) {