option-chain在vue2中配置

记录一下babel可选链配置

vue2模板里不可以使用可选链,可以在computed计算属性使用

第一种是json配置需要在babel.config.js里配置 or在babel.config.js里配置(根据babel版本不同,那配置的地方不一样), 详情 www.babeljs.cn/docs/usage

第二种是在命令行里配置 第三种webpack插件这种底层用到nodejs的时候才会用的

详情请见babel中文官网 www.babeljs.cn/

使用方法

第一步

安装

npm install --save-dev @babel/plugin-syntax-optional-chaining

第二步

配置

// babel.config.js
module.exports = {
 
  plugins: ["@babel/plugin-syntax-optional-chaining"]
  
}


module.exports = { presets };

第三步

vue2中使用

<template>
    <div>
        {{name}}
    </div>
</template>

<script>
    export default {
        data(){
            return {
        adventurer : {
            name: 'Alice',
            cat: {
                name: 'Dinah'
            }
            } 
            }
        },
        computed:{
            name(){
              return this.adventurer.cat?.name
            }  
        }
    }
</script>