Vue 条件渲染的魔力，解析各种场景！

Vue.js 中的条件渲染是一种强大的技术，它允许开发者根据条件动态显示或隐藏元素。这对于构建交互式和响应式用户界面至关重要。本文将深入探讨条件渲染的各种场景，从基本用例到高级技术。

场景 1：使用 v-if 和 v-else

• v-if：当表达式为 true 时显示元素。
• v-else：当条件为 false 时显示备用元素。

示例：显示按钮，当计数大于 0 时可用：

<template>
  <button v-if="count > 0" @click="doSomething">Click me</button>
  <span v-else>Button disabled</span>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    doSomething() {
      // ...
    }
  }
};
</script>

场景 2：使用 v-show 和 v-cloak

• v-show：切换元素的显示或隐藏，而不影响布局。
• v-cloak：在元素可见之前隐藏其内容，防止闪烁。

示例：淡入一个加载完成的组件：

<template>
  <div v-show="loading">Loading...</div>
  <component v-cloak :is="component"></component>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      component: null
    };
  },
  mounted() {
    // 异步加载组件
    setTimeout(() => {
      this.loading = false;
      this.component = MyComponent;
    }, 1000);
  }
};
</script>

场景 3：使用三元运算符

• 三元运算符：一种简写语法，用于在条件为真或假时显示不同的元素。

示例：根据用户角色显示不同的文本：

<template>
  <p>{{ role === "admin" ? "Administrator" : "Guest" }}</p>
</template>

<script>
export default {
  data() {
    return {
      role: "guest"
    };
  }
};
</script>

场景 4：使用计算属性

• 计算属性：一种缓存的 Vue 属性，基于其他响应式数据计算。

示例：根据用户输入动态计算可用的选项：

<template>
  <select>
    <option v-for="option in options" :value="option.value">{{ option.label }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      userInput: ""
    };
  },
  computed: {
    options() {
      return this.userInput.length > 0
        ? filteredOptions(this.userInput)
        : [];
    }
  }
};
</script>

场景 5：使用插槽

• 插槽：一种用于在组件内定义内容的区域，允许动态渲染。

示例：创建一个可重用的模态框，其内容由插槽定义：

<template>
  <transition name="fade">
    <div v-if="show" class="modal">
      <div class="modal-content">
        <slot />
        <button @click="show = false">Close</button>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  }
};
</script>

<Modal>
  <h1>Hello World!</h1>
  <p>This is the content of the modal.</p>
</Modal>

高级技术：

• v-if 与 v-show 的选择：v-if 销毁和重新创建元素，而 v-show 仅切换其显示。对于频繁切换的元素，v-show 更高效。
• 条件 v-bind：将条件表达式应用于绑定属性的值，以动态控制元素属性。
• 条件修饰符：添加修饰符（如 .sync 或 .once)，以修改条件渲染的默认行为。

结语：

条件渲染是 Vue 中的一个强大工具，使开发者能够根据条件动态显示或隐藏元素。通过熟练掌握各种场景和高级技术，开发者可以构建复杂而响应式用户界面，无缝适应用户交互和数据变化。