当前位置： 技术文章>> vue3条件渲染的介绍

文章标题：vue3条件渲染的介绍
  • 文章分类: 前端
  • 10787 阅读

在 Vue3 中，可以使用 v-if 和 v-show 两个指令来实现条件渲染。

v-if 指令是将元素完全从 DOM 中移除，只有在条件为真时才会渲染该元素。而 v-show 指令是在元素的 style 属性中添加 display 样式，并不会将元素从 DOM 中移除。

下面是一个示例代码，演示了如何使用 v-if 和 v-show 指令来实现条件渲染：

template>
  <div>
    <h2 v-if="showHeading">这是一个标题</h2>

    <div v-show="showContent">
      <p>这是一个条件渲染的段落。</p>
    </div>

    <button @click="toggleShow">点击切换显示状态</button>
  </div></template><script>export default {  data() {    return {      showHeading: true,      showContent: false
    }
  },  methods: {    toggleShow() {      this.showHeading = !this.showHeading
      this.showContent = !this.showContent
    }
  }
}</script>

在上面的示例代码中，我们使用了 v-if 指令来渲染一个标题元素，只有当 showHeading 为真时才会渲染该元素。同时，我们还使用了 v-show 指令来渲染一个段落元素，并且只有当 showContent 为真时才会显示该元素。注意，按钮的点击事件会触发 toggleShow 方法，该方法会切换 showHeading 和 showContent 的状态。

需要注意的是，v-if 和 v-show 指令的使用场景不同。v-if 指令适用于在需要时创建或销毁元素的情况，而 v-show 指令适用于需要频繁切换显示状态的元素。在实际开发中，应根据具体情况选择合适的指令。


推荐文章