vue關(guān)于自定義指令與v-if沖突的問題
更新時間：2022年08月15日 11:02:37 作者：MmM豆
這篇文章主要介紹了vue關(guān)于自定義指令與v-if沖突的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
自定義指令與v-if沖突
問題
當(dāng)同時存在 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){
? ? ? ? ? //權(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為什么不能同時使用
指令v-for和v-if不建議同時使用
在vue2.x中，v-for優(yōu)先級是高于v-if的，如果在同一個元素中使用了v-for和v-if，那么在渲染時，v-for的每一項都要重復(fù)運行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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了requirejs + vue 項目搭建詳解,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
vuex狀態(tài)管理數(shù)據(jù)狀態(tài)查詢與更改方式
這篇文章主要介紹了vuex狀態(tài)管理數(shù)據(jù)狀態(tài)查詢與更改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中實現(xiàn)多頁面應(yīng)用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vuex根據(jù)不同的用戶權(quán)限展示不同的路由列表功能
最近接到一個新的需求，要求將系統(tǒng)的用戶進(jìn)行分類，用戶登陸后根據(jù)不同的用戶權(quán)限展示不同的功能列表。這篇文章主要介紹了vuex根據(jù)不同的用戶權(quán)限展示不同的路由列表,需要的朋友可以參考下2019-09-09
vue數(shù)據(jù)雙向綁定原理解析（get & set)
這篇文章主要為大家詳細(xì)解析了vue.js數(shù)據(jù)雙向綁定原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單購物車小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
今天小編就為大家?guī)硪黄猘xios取消請求的實踐記錄分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue如何動態(tài)修改meta的title，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue-content-loader內(nèi)容加載器的使用方法
這篇文章主要介紹了vue-content-loader內(nèi)容加載器的使用方法,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
vue中利用prop進(jìn)行父子通信時的注意事項總結(jié)
這篇文章主要給大家介紹了關(guān)于vue中利用prop進(jìn)行父子通信時的注意事項,文中通過實例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01