Vue ref 获取隐藏的 DOM 元素内容：使用 ref 访问隐藏元素

<template>
  <div>
    <button @click="toggleElement">Toggle Element</button>
    <div ref="hiddenElement" v-show="isVisible">Hidden Element</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isVisible: false
    };
  },
  methods: {
    toggleElement() {
      this.isVisible = !this.isVisible;
      if (this.isVisible) {
        // 使用 ref 获取隐藏的 DOM 元素
        console.log(this.$refs.hiddenElement);
      }
    }
  }
};
</script>
<p>在上面的示例中，点击 &quot;Toggle Element&quot; 按钮可以切换隐藏元素的显示和隐藏状态。当元素显示时，通过 <code>ref</code> 获取隐藏的 DOM 元素，并在控制台输出。</p>
<p>需要注意的是，<code>v-show</code> 指令会将元素的 <code>display</code> 样式设置为 <code>none</code>，但是元素仍然存在于 DOM 中，因此可以通过 <code>ref</code> 获取该元素。与之相反，<code>v-if</code> 指令会从 DOM 中完全移除元素，因此无法通过 <code>ref</code> 获取。</p>