v-if 与 v-else 组合

v-if 与 v-else 组合使用，实现二选一的条件渲染。

• Vue 代码：

<div v-if="cond">内容div>
<div v-else>其他内容div>

• VuReact 编译后 React 代码：

{
  cond ? <div>内容div> : <div>其他内容div>;
}

VuReact 将 v-if/v-else 组合编译为完整的三元表达式，完全模拟 Vue 的条件分支语义——两个分支互斥，确保同一时间只有一个元素被渲染。这种编译方式保持了代码的简洁性和可读性，同时与 React 的表达式渲染模式完美契合。

多条件 v-else-if 链

复杂的多条件判断链，使用 v-if、v-else-if、v-else 组合。

• Vue 代码：

<div v-if="type === 'A'">内容Adiv>
<div v-else-if="type === 'B'">内容Bdiv>
<div v-else>其他内容div>

• VuReact 编译后 React 代码：

{
  type === 'A' ? <div>内容Adiv> : type === 'B' ? <div>内容Bdiv> : <div>其他内容div>;
}

对于多条件链，VuReact 采用嵌套三元表达式编译策略，将 Vue 的 v-else-if 链转换为嵌套的条件表达式。这种编译方式完全保持 Vue 的条件链语义——按顺序检查条件，第一个满足条件的分支被渲染，后续分支被跳过。

复杂业务场景条件渲染

实际业务中的复杂条件渲染，包含嵌套条件、事件绑定、插值表达式等。

• Vue 代码：

<div v-if="user.role === 'admin' && (user.permissions.includes('write') || isSuperAdmin)">
  <h1>管理员控制面板h1>
  <button @click="deleteAll">删除所有数据button>
div>
<div v-else-if="user.role === 'editor' && articles.length > 0 && !isSuspended">
  <h2>编辑文章 (共{{ articles.length }}篇)h2>
  <ul>
    <li v-for="article in articles" :key="article.id">{{ article.title }}li>
  ul>
div>
<div v-else-if="user.role === 'viewer' && hasSubscription">
  <h3>订阅用户视图h3>
  <p>您的订阅将于{{ subscriptionEndDate }}到期p>
div>
<div v-else-if="user.role === 'guest' && showTrial">
  <div class="trial-banner">
    <p>试用用户，剩余{{ trialDays }}天p>
    <button @click="upgrade">升级账户button>
  div>
div>
<div v-else>
  <div class="error-state">
    <p v-if="isLoading">加载中...p>
    <p v-else-if="errorMessage">{{ errorMessage }}p>
    <p v-else>无访问权限或账户状态异常p>
    <button @click="retry">重试 ({{ retryCount }}/3)button>
  div>
div>

• VuReact 编译后 React 代码：

{
  user.role === 'admin' && (user.permissions.includes('write') || isSuperAdmin) ? (
    <div>
      <h1>管理员控制面板h1>
      <button onClick={deleteAll}>删除所有数据button>
    div>
  ) : user.role === 'editor' && articles.length > 0 && !isSuspended ? (
    <div>
      <h2>编辑文章 (共{articles.length}篇)h2>
      <ul>
        {articles.map((article) => (
          <li key={article.id}>{article.title}li>
        ))}
      ul>
    div>
  ) : user.role === 'viewer' && hasSubscription ? (
    <div>
      <h3>订阅用户视图h3>
      <p>您的订阅将于{subscriptionEndDate}到期p>
    div>
  ) : user.role === 'guest' && showTrial ? (
    <div>
      <div className="trial-banner">
        <p>试用用户，剩余{trialDays}天p>
        <button onClick={upgrade}>升级账户button>
      div>
    div>
  ) : (
    <div>
      <div className="error-state">
        {isLoading ? (
          <p>加载中...p>
        ) : errorMessage ? (
          <p>{errorMessage}p>
        ) : (
          <p>无访问权限或账户状态异常p>
        )}
        <button onClick={retry}>重试 ({retryCount}/3)button>
      div>
    div>
  );
}

对于复杂的业务场景，VuReact 展示了完整的条件编译能力：

1. 复杂条件表达式：将 Vue 的复杂条件逻辑（&&、||、函数调用等）原样转换为 JSX 表达式
2. 事件绑定转换：@click 转换为 onClick，保持事件语义
3. 插值表达式：{{ }} 转换为 { }，保持数据绑定
4. 样式类名转换：class 转换为 className，符合 React 规范

VuReact 的编译策略完全保持 Vue 的条件渲染语义，同时生成符合 React 最佳实践的代码，提高可维护性。

相关资源

• VuReact 官方文档：语义编译对照总览

如果你觉得本文对你理解 VuReact 有帮助，欢迎点赞、收藏、关注！