Vue自定义指令v-fill实现元素仅在有内容时渲染的问题

我想要实现一个v-fill自定义指令，用来简化"仅当元素有内容时才渲染该元素"的写法——替代重复写v-if和插值的冗余代码（比如<div v-if="store.sometimesIWillBeEmpty">{{store.sometimesIWillBeEmpty}}</div>），改成<div v-fill="store.sometimesIWillBeEmpty"></div>的简洁形式。

目前指令在绑定值非空时能正常填充内容，但值为空时没法隐藏元素，现有代码如下：

var store = {message: "hello cobber"}
Vue.directive('fill', function (el, binding, vnode) {
 if(binding.value) el.innerHTML = binding.value
 else el = null
} );
new Vue({
 el: '#fill-example',
 data: { store: store }
})

我只差一行代码就能实现需求，请问该修改哪一行？

嗨，这个问题很典型——你当前写的else el = null完全没起作用！这里只是把函数内部的局部变量el赋值为null，对真实的DOM节点没有任何影响，自然没法隐藏元素。

你只需要把else el = null这一行替换成：

else el.parentNode.removeChild(el)

这行代码的作用是：找到当前元素的父节点，然后把当前元素从DOM树中移除，这样就实现了绑定值为空时隐藏元素的效果。

如果要更严谨一点，避免元素已经被移除后调用removeChild报错，可以加个简单的判断：

else if (el.parentNode) el.parentNode.removeChild(el)

这样修改后，你的v-fill指令就完全符合预期了：值非空时填充内容并保留元素，值为空时移除元素。

内容的提问来源于stack exchange，提问作者bbsimonbb