V-if是控制元素display的属性设置元素消失与隐藏

你的理解基本正确，但是稍微有点偏差。在Vue.js中，v-if是一个指令，用于控制元素是否渲染到页面上。当v-if的值为false时，对应的元素会从DOM中删除，而当v-if的值为true时，对应的元素会被重新渲染到DOM中。这样可以实现根据条件动态显示或隐藏元素的效果。在实现上，v-if并不是设置元素display的属性，而是通过添加或删除DOM节点来达到控制元素显示或隐藏的目的。

相关问题

vue中控制元素显示与否的区别？v-if和v-show的区别

在 Vue 中，可以使用 `v-if` 和 `v-show` 来控制元素的显示与隐藏。

`v-if` 是根据条件判断来控制元素是否渲染出来，如果条件为真，则渲染该元素，否则不渲染。当条件切换时，元素的创建和销毁也会被触发。因此，如果在频繁切换的元素上使用 `v-if`，则可能会导致性能问题。

`v-show` 是通过 CSS 属性 `display` 来控制元素的显示与隐藏，当条件为真时，将元素的 `display` 属性设置为 `block`，否则将其设置为 `none`。因此，无论条件是否为真，元素始终存在于 DOM 中，只是通过 CSS 来控制其是否显示。这意味着在频繁切换的元素上使用 `v-show`，不会像 `v-if` 一样导致性能问题。

综上所述，如果需要频繁切换元素的显示与隐藏，则应该使用 `v-show`，否则使用 `v-if`。

.v-hide是Vue指令中控制元素显示隐藏相关的吗

在 Vue 中，没有内置的 `v-hide` 指令。如果使用了 `v-hide`，则需要自己定义该指令的实现。一般情况下，实现 `v-hide` 指令的思路是通过 CSS 样式来控制元素的显示和隐藏。例如，可以定义以下指令：

Vue.directive('hide', function (el, binding) {
  if (binding.value) {
    el.style.display = 'none';
  } else {
    el.style.display = '';
  }
});

其中，`Vue.directive` 方法用于定义一个自定义指令，第一个参数是指令名称，第二个参数是一个函数，用于实现指令的行为。在该函数中，`el` 表示绑定指令的元素，`binding.value` 表示指令绑定的值。根据 `binding.value` 的值，可以通过修改 `el.style.display` 来控制元素的显示和隐藏。例如，可以这样使用 `v-hide` 指令：

<div v-hide="isHide">这是一个元素</div>

其中，`isHide` 是一个在 Vue 实例中定义的变量或表达式，它的值决定了该元素是否隐藏。当 `isHide` 的值为真时，该元素会被隐藏，否则该元素会显示出来。