VUE-----常用指令

v-for：

作用：列表渲染，遍历容器的元素或者对象的属性

参数说明：

        items 为遍历的数组

        item 为遍历的元素

        index 为索引/下标，从0开始；可以省略，省略index语法：v-for=“item in items

v-bind

v-if 和 v-show 的基本概念

v-if 和 v-show 是 Vue.js 中用于条件性渲染元素的指令。两者都能控制元素的显示与隐藏，但实现机制和适用场景有所不同。

v-if 的工作原理

v-if 是真正的条件渲染指令，在表达式为真时才会渲染元素到 DOM 中。如果初始条件为假，元素不会被渲染到 DOM 中。当条件变化时，v-if 会销毁或重建元素及其事件监听器和子组件。由于涉及 DOM 操作，v-if 的切换开销较大，适合运行时条件很少改变的场景。

<div v-if="isVisible">This is rendered only if isVisible is true</div>

v-show 的工作原理

v-show 通过 CSS 的 display 属性控制元素的显示与隐藏。无论初始条件如何，元素始终会被渲染到 DOM 中，只是简单地切换 display: none 或 display: block。由于不涉及 DOM 操作，v-show 的切换开销较小，适合需要频繁切换的场景。

<div v-show="isVisible">This is always rendered, but hidden if isVisible is false</div>

性能与适用场景对比

v-if 有更高的初始渲染开销，因为它在条件为假时不会渲染元素。但如果条件在运行时很少改变，v-if 会更高效，因为它避免了不必要的 DOM 节点存在。

v-show 有更高的初始渲染成本，因为无论条件如何都会渲染元素。但后续切换的开销很小，适合需要频繁切换的场景。

选择建议

需要频繁切换元素显示状态时，使用 v-show。例如，下拉菜单、模态框等交互组件。

条件在运行时很少改变或需要销毁组件以释放资源时，使用 v-if。例如，权限控制、不同视图的切换等。