babel-plugin-vue-jsx-v-if

在 Vue JSX 中使用 v-if / v-else-if / v-else，通过 @vitejs/plugin-vue-jsx 的 babelPlugins 接入。

安装

npm i -D babel-plugin-vue-jsx-v-if

配置

// vite.config.ts
import { defineConfig } from "vite";
import vueJsx from "@vitejs/plugin-vue-jsx";
import vueJsxVIf from "babel-plugin-vue-jsx-v-if";

export default defineConfig({
  plugins: [
    vueJsx({
      babelPlugins: [vueJsxVIf],
    }),
  ],
});

示例

输入

<div>
  <p v-if={ok}>显示</p>
  <p v-else>隐藏</p>

  <template v-if={ok}>
    <span>A</span>
    <span>B</span>
  </template>
</div>

输出

<div>
  {ok ? <p>显示</p> : <p>隐藏</p>}
  {ok ? (
    <>
      <span>A</span>
      <span>B</span>
    </>
  ) : null}
</div>

规则

• v-if / v-else-if 必须写条件，如 v-if={expr}
• v-else / v-else-if 必须紧跟前一个条件兄弟节点
• <template> 仅可与上述指令联用，编译为 Fragment（<>...</>）
• 不符合规则的用法会在控制台警告（含可点击的 文件:行:列），并忽略无效指令

License

MIT