vue if

作者：白话少年的痴情梦— 发布日期:2026-04-04 浏览:101

<template>
  <div>
    <!-- 使用 v-if 指令来条件渲染元素 -->
    <p v-if="isVisible">这段文字只有在 isVisible 为 true 时才会显示。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义一个布尔类型的变量 isVisible
      isVisible: true
    };
  }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

解释说明：

v-if 是 Vue.js 中用于条件渲染的指令。当绑定的表达式的值为 true 时，对应的元素会被渲染到 DOM 中；否则，该元素不会被渲染。
在上面的例子中，<p> 元素只有在 isVisible 的值为 true 时才会显示。如果 isVisible 被设置为 false，则 <p> 元素将不会出现在页面上。
data() 函数返回一个对象，其中包含了组件的状态数据。在这个例子中，isVisible 是一个布尔类型的属性，默认值为 true。

上一篇：vue3 创建项目

下一篇：vue .sync