vuecli中配置 es2020 可选链操作符 ?.和空值合并??兼容

2023-10-21 12:24| 来源: 网络整理| 查看: 265

可选链，空值合并

安装插件可选链?. 空值合并 ?? npm install @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator -D 在.babelrc或babel.config.js中添加插件 module.exports = { plugins: [ '@babel/plugin-proposal-optional-chaining', // 可选链 ?. '@babel/plugin-proposal-nullish-coalescing-operator' // 空值合并 ?? ] } 使用示例 let obj = {} let a = obj ?. user?. name ?? '阿羽' // 阿羽 vue版本兼容

当安装完成之后若还是一直报错，请降低 @babel/plugin-proposal-optional-chaining 的版本号，切换版

npm install @babel/[email protected] --D 在template中使用（目前Vue默认是不支持在template中使用可选链操作符的，如果我们想要实现可选链操作符类似的效果，需要绕一个弯，具体代码如下）

添加optionalChaining方法

/** * 解决Vue Template模板中无法使用可选链的问题 * @param obj * @param rest * @returns {*} */ export const optionalChaining = (obj, ...rest) => { let tmp = obj; for (let key in rest) { let name = rest[key]; tmp = tmp?.[name]; } return tmp || ""; };

main.js中注入

import Vue from "vue"; import App from "./App.vue"; import {optionalChaining} from "./utils/index"; Vue.prototype.$$ = optionalChaining; new Vue({ render: h => h(App) }).$mount("#app");

template中使用

{{$$(userInfo,"friends",0,"userName")}} export default { name: "test", data(){ return { userInfo:{} } } }

【本文地址】

公司简介

联系我们