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