VUE2.0自定義指令與v-if沖突導(dǎo)致元素屬性修改錯位問題及解決方法
更新時間：2023年07月21日 08:55:55 作者：qq2397248986
這篇文章主要介紹了VUE2.0自定義指令與v-if沖突導(dǎo)致元素屬性修改錯位問題及解決方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
問題：
VUE自定義指令v-permisson 修改了元素是否隱藏，和v-if一起用時，多個按鈕元素同時使用v-permisson和v-if控制展示，后面的v-if=false的按鈕元素被消除，其v-permisson的控制效果修改了上一個v-if=true的按鈕元素。元素屬性修改錯位
猜測原因：
v-if=false DOM元素未創(chuàng)建，v-permisson的el參數(shù)實際修改操作時定位到了錯誤的元素上
解決：
1.合并v-v-if的參數(shù)到v-permisson參數(shù)里
2.v-permisson 支持對象傳參，可以控制元素的屬性 也可以 用el.remove()刪除當(dāng)前元素。
3.利用vue的雙向綁定重新渲染DOM元素，重新刷新元素屬性（未生成的元素，刷新后也可以重新生成），具體寫法元素綁定值附空值 如 this.orderList = [] ，隨后在賦值實際的數(shù)據(jù)。
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) {
// 數(shù)據(jù)校驗
if (binding.value === null || binding.value === undefined) {
el.remove()
return
}
var permission
var condition
if (binding.value.code !== undefined) {
// 對象入?yún)?
permission = binding.value.code + ‘'
condition = binding.value.condition
}
…
}調(diào)用：666
到此這篇關(guān)于VUE2.0 自定義指令與v-if沖突 導(dǎo)致元素屬性修改錯位解決的文章就介紹到這了,更多相關(guān)vue自定義指令與v-if沖突內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
文章介紹了如何在Vue項目中對接DeepSeek API,包括在開放平臺注冊賬號申請APIKey、安裝axios庫、創(chuàng)建API調(diào)用函數(shù)以及在Vue組件中調(diào)用該函數(shù)2025-01-01
vue3集成echarts數(shù)據(jù)刷新后圖表不刷新的解決方法
vue3 集成 echarts 最大的坑就是出現(xiàn)了,reactive 的數(shù)據(jù) 刷新了,但圖表缺不會刷新,所以本文就給大家詳細(xì)的介紹一下vue3集成echarts數(shù)據(jù)刷新后圖表不刷新的解決方法,需要的朋友可以參考下2023-08-08
Vue.js是一種流行的JavaScript框架,用于構(gòu)建用戶界面,Vue具有靈活的路由功能,可以根據(jù)特定需求動態(tài)生成路由,本文將介紹Vue動態(tài)路由生成的常見實現(xiàn)方法,并提供相應(yīng)的源代碼示例,需要的朋友可以參考下2025-07-07
這篇文章主要介紹了Vue如何使用混合Mixins和插件開發(fā)詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
本文主要介紹了React中構(gòu)建一個簡單的樹形組件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
這篇文章主要介紹了Vue "...infinite update loop..."的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
本篇文章主要介紹了vuejs實現(xiàn)遞歸樹型菜單組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
vue深拷貝的三種實現(xiàn)方式：1、通過遞歸方式實現(xiàn)深拷貝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法實現(xiàn)深拷貝,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue+ts實現(xiàn)元素鼠標(biāo)拖動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要為大家介紹了在Vue項目中是否使用store原理深究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11