在vue使用jsx来解决template中复杂的逻辑处理

1、首先安装依赖：

npm install postcss-loader autoprefixer babel-loader babel-core

 

2、在 .babelrc文件中修改：

把

"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]

 替换为：

 "presets": ["es2015"],
 "plugins": ["transform-vue-jsx"]

最终效果如下图：

3、修改render函数

（1）固定的标签

之后就可以写jsx文件了，将render中的参数写为h,h相当于js中的createElement 。必须是h，否则会报错。