vue 自定义directive 模拟 v-if v-else 的疑问

Question

<App v-display.some="['del','add','edit']" />
<App v-undisplay />

if (el.nextElementSibling.__vue__.$vnode.data.directives.some(e => e.name === 'undisplay')) {
    el.parentNode && el.parentNode.removeChild(el.nextElementSibling)
}

上面的代码是一个简单的判断相邻的下一个元素上是否有特定的directive，如果有就在本身元素渲染的条件下移除它。问题是我把它移除了等到我自己渲染条件符合的时候怎么把移除的元素重新渲染回来？

Answer 1

首先，我觉得自带的v-show v-if v-else就能满足你的需求。

<App v-show="visible" />
<App v-show="!visible" />
或者
<App v-if="visible" />
<App v-else>

data() {
    return {
        displayType: '',
        displayName: ['del', 'add', 'edit']
    }
},
computed: {
    visible() {
        // 根据当前的显示类型，来判断是否显示
        return this.displayName.includes(this.displayType)
    }
}

然后再说你的自定义，你删除后还需要加回来，那么你自己需要定义变量，保存删除后的节点，这样在判断满足后才能从变量中获取加回来，否则没有保存想加也加不回来