elementplus hidden 如何使用

Element Plus 是 Vue 3 的 UI 框架 Element UI 的下一代版本，它提供了一个名为 `v-hidden` 或 `hidden` 的指令，用于控制元素的可见性。`hidden` 可以让你隐藏或显示 Vue 组件、DOM 元素，其工作原理类似于 CSS 的 `display: none;`。

使用方法如下：

1. **基本用法**:

   <template>
     <button v-if="isHidden" @click="show">点击显示</button>
     <div v-hidden="isHidden">这是隐藏的内容</div>
   </template>

   <script>
   export default {
     data() {
       return {
         isHidden: true, // 初始设置为隐藏状态
       };
     },
     methods: {
       show() {
         this.isHidden = false; // 点击按钮后切换到显示状态
       },
     },
   };
   </script>

2. **响应式数据**:
当 `isHidden` 数据变化时，元素会自动根据该值调整显示状态。

3. **动态绑定表达式**:
如果需要根据计算属性或者复杂的条件来控制隐藏，你可以这样做：

   <div v-hidden="someComputedValue || someBooleanProperty"></div>