babel-plugin-jsx-if
这是一个babel
插件, 能够在jsx语法中支持v-if
、v-else-if
、v-else
, 支持自定义前缀 rc-if
、xx-if
。支持react 和 vue
使用:
npm i babel-plugin-jsx-if --save-dev
添加 jsx-if 到 .babelrc
文件
{
...
"plugins": ["transform-vue-jsx", "jsx-if"]
}
然后你可以在jsx中使用该语法
...
return() {
<div>
<span v-if={a<0}>1</span>
<span v-else-if={a<5}>2</span>
<span v-else>3</span>
<div>
}
自定义前缀
如果你希望自定义指令前缀,你可以添加配置:
{
...
"plugins": ["transform-vue-jsx", ["jsx-if", {mark: 'rc'}]]
}
...
return() {
<div rc-if={true}><div>
}