vue關于自定義指令與v-if沖突的問題
更新時間：2022年08月15日 11:02:37 作者：MmM豆
這篇文章主要介紹了vue關于自定義指令與v-if沖突的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
自定義指令與v-if沖突
問題
當同時存在 v-if 和自定義隱藏的指令（后面統(tǒng)一稱為v-power） el 會被刪除，單元素上的指令依舊會執(zhí)行，修改的是上一個元素的顯示影藏
解決
第一種方式，將v-if 替換為v-show，這樣元素一直存在，就不會出現(xiàn)問題，(如果你的自定義指令會動態(tài)改變display屬性，那就可能和v-show沖突 v-show是通過display：none來控制影藏，這點需要注意，只是單一的影藏，就不需要考慮了)
第二種方式，將v-if指令合并到自定義中 傳入一個對象；
改指令實現(xiàn)通過傳入的對象來實現(xiàn)是否需要影藏,
<div v-power="{power:1,vIf:true}"></div>Vue.directive('power', {
? update: function (el, binding, vnode) {
? ? vnode.context.$nextTick(()=>{
? ? const power = [1,2,3,4]
? ? const data ?= binding.value // 獲取綁定的值
? ? console.log('power',power);
? ? console.log('data',data);
??
? ? ?//存在v-if 指令使用，合并指令，
? ? ? ? if(data.vIf){
? ? ? ? ? //權限數(shù)組中不存在表示影藏
? ? ? ? ? if (!data.power.includes(power)) {
? ? ? ? ? ? el.style.display = "none"
? ? ? ? ? }
? ? ? ? }else{
? ? ? ? ? el.remove() //v-if 為false 刪除元素，模擬v-if
? ? ? ? ??
? ? ? ? }
? ? ?})
? }
})vue指令v-for和v-if為什么不能同時使用
指令v-for和v-if不建議同時使用
在vue2.x中，v-for優(yōu)先級是高于v-if的，如果在同一個元素中使用了v-for和v-if，那么在渲染時，v-for的每一項都要重復運行v-if，這會降低渲染的效率
解決方式
可以將v-if的功能替換為 在一個計算屬性上面遍歷后使用
computed: {
? activeUsers: function () {
? ? return this.users.filter(function (user) {
? ? ? return user.isActive
? ? })
? }
}
<ul>
? <li
? ? v-for="user in activeUsers"
? ? :key="user.id"
? >
? ? {{ user.name }}
? </li>
</ul>以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了超詳細的5個Shell腳本實例分享(值得收藏),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
本文主要介紹了vue2之vue.config.js最全配置教程,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
這篇文章主要介紹了Vue.js中的下載和調(diào)用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
彈窗經(jīng)常被使用在一些表單的增刪改查啊,或者彈出一些提示信息等等,這篇文章主要給大家介紹了關于Vue?Dialog彈窗詬病解決的相關資料,需要的朋友可以參考下2023-01-01
vue項目前端加前綴(包括頁面及靜態(tài)資源)的操作方法
這篇文章主要介紹了vue項目前端加前綴(包括頁面及靜態(tài)資源)的操作方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
Vue.js 3.x 中的響應式數(shù)據(jù)ref 與 reactive詳解
ref 和 reactive 是 Vue.js 3 中用于創(chuàng)建響應式數(shù)據(jù)的兩個關鍵函數(shù),它們分別適用于不同類型的數(shù)據(jù),幫助我們更好地組織和管理組件的狀態(tài),這篇文章主要介紹了Vue.js 3.x 中的響應式數(shù)據(jù)：ref 與 reactive,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue2.x與Vue3.x中路由鉤子的區(qū)別，分別介紹了路由鉤子的分類，路由配置守衛(wèi)鉤子以及組件內(nèi)守衛(wèi)鉤子等有需要的朋友可以借鑒參考下2021-09-09
下面小編就為大家分享一篇Vue cli+mui 區(qū)域滾動的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
在 Vue.js 中,組件之間的數(shù)據(jù)傳遞是一個常見的需求,Vue 提供了多種方法來實現(xiàn)這一目標,包括 props、全局事件總線、消息的訂閱與發(fā)布等,下面我們就來學習一下這些方法的具體實現(xiàn)吧2023-12-12
Vue+element自定義指令如何實現(xiàn)表格橫向拖拽
這篇文章主要介紹了Vue+element自定義指令如何實現(xiàn)表格橫向拖拽，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10