Why won't Vue let you use the if directive in render?

Question

Vue.js

render: function (h) {
    return h('div', {
    	directives: [{name: 'if', value: this.List.length > 5}]
    })
}

produces:

[Vue warn]: Failed to resolve directive: if

(found in <Anonymous>)

What is the problem? The "show" directive works in this code

Answer 1

We read the documentation and see that if/model directives are not used directly in the render function. This one looks more like React than Angular:

render: function (h) {
  if (this.List.length <= 5) return h('');
  return h('div', { ... });
}

The "show" directive in this code works because show does not operate on DOM nodes, but simply hangs on the tag , leaving the node itself in the page structure. display: none