vue關(guān)于自定義指令與v-if沖突的問(wèn)題
自定義指令與v-if沖突
問(wèn)題
當(dāng)同時(shí)存在 v-if 和自定義隱藏的指令（后面統(tǒng)一稱為v-power） el 會(huì)被刪除，單元素上的指令依舊會(huì)執(zhí)行，修改的是上一個(gè)元素的顯示影藏
解決
第一種方式，將v-if 替換為v-show，這樣元素一直存在，就不會(huì)出現(xiàn)問(wèn)題，(如果你的自定義指令會(huì)動(dòng)態(tài)改變display屬性，那就可能和v-show沖突 v-show是通過(guò)display：none來(lái)控制影藏，這點(diǎn)需要注意，只是單一的影藏，就不需要考慮了)
第二種方式，將v-if指令合并到自定義中 傳入一個(gè)對(duì)象；
改指令實(shí)現(xiàn)通過(guò)傳入的對(duì)象來(lái)實(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)文章
這篇文章主要介紹了requirejs + vue 項(xiàng)目搭建詳解,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vuex狀態(tài)管理數(shù)據(jù)狀態(tài)查詢與更改方式
這篇文章主要介紹了vuex狀態(tài)管理數(shù)據(jù)狀態(tài)查詢與更改方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中實(shí)現(xiàn)多頁(yè)面應(yīng)用方式
這篇文章主要介紹了vue中實(shí)現(xiàn)多頁(yè)面應(yīng)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vuex根據(jù)不同的用戶權(quán)限展示不同的路由列表功能
最近接到一個(gè)新的需求，要求將系統(tǒng)的用戶進(jìn)行分類(lèi)，用戶登陸后根據(jù)不同的用戶權(quán)限展示不同的功能列表。這篇文章主要介紹了vuex根據(jù)不同的用戶權(quán)限展示不同的路由列表,需要的朋友可以參考下2019-09-09
vue數(shù)據(jù)雙向綁定原理解析（get & set)
這篇文章主要為大家詳細(xì)解析了vue.js數(shù)據(jù)雙向綁定原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Vue實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車(chē)小案例
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車(chē)小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
今天小編就為大家?guī)?lái)一篇axios取消請(qǐng)求的實(shí)踐記錄分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue如何動(dòng)態(tài)修改meta的title
這篇文章主要介紹了vue如何動(dòng)態(tài)修改meta的title，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue-content-loader內(nèi)容加載器的使用方法
這篇文章主要介紹了vue-content-loader內(nèi)容加載器的使用方法,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
vue中利用prop進(jìn)行父子通信時(shí)的注意事項(xiàng)總結(jié)
這篇文章主要給大家介紹了關(guān)于vue中利用prop進(jìn)行父子通信時(shí)的注意事項(xiàng),文中通過(guò)實(shí)例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01