VUE2.0 自定義指令與v-if沖突 導緻元素屬性修改錯位解決

問題：

VUE自定義指令v-permisson 修改了元素是否隐藏，和v-if一起用時，

多個按鈕元素同時使用v-permisson和v-if控制展示，後面的v-if=false的按鈕元素被消除，其v-permisson的控制效果修改了上一個v-if=true的按鈕元素。元素屬性修改錯位

猜測原因：

v-if=false DOM元素未建立，v-permisson的el參數實際修改操作時定位到了錯誤的元素上

解決：

1.合并v-v-if的參數到v-permisson參數裡

2.v-permisson 支援對象傳參，可以控制元素的屬性 也可以 用el.remove()删除目前元素。

3.利用vue的雙向綁定重新渲染DOM元素，重新重新整理元素屬性（未生成的元素，重新整理後也可以重新生成），

具體寫法元素綁定值附空值 如 this.orderList = [] ，随後在指派實際的資料。

v-permisson 案例代碼如下：

export default {

bind(el, binding) {

dateDeal(el, binding)

},

update(el, binding) {

dateDeal(el, binding)

},

unbind(el, binding) {

}

}

// 本指令與v-if沖突 删除的元素指派會錯改其他元素的屬性***

function dateDeal(el, binding) {

// 資料校驗

if (binding.value === null || binding.value === undefined) {

el.remove()

return

}

var permission

var condition

if (binding.value.code !== undefined) {

// 對象入參

permission = binding.value.code + ‘’

condition = binding.value.condition

}

…

}

調用：

666