头像空白问题

当用户没有设置头像时,我们可以使用用户名第一个字来当头像

主要涉及一个截取,截取字符串第一个字

变量名.charAt(0)

如果变量名为null或者undefine

那么就会报错

使用可选链操作符

当前面的值为nul或undefine时,就不会执行后面的操作,直接是null或undefine.就不会报错了

在当我们不知道前面的值是什么时,可以加上这个可选链操作符

变量名?.charAt(字符串下标)

注意,使用可选链操作符时,

vue的版本最少为2.7.0

 npm i vue@2.7.0  vue-template-compiler@2.7.0 

例如

当没有头像显示时就显示用户名第一个字

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/629768.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML--CSS--盒子模型

在CSS模型中,所有元素都可以看做是一个盒子,这个盒子的组成部分: content 内容,文本或者图片 padding 内边距,定义内容到边框的距离 margin 外边距,定义当前元素与其他元素之间的距离 border 边框&#xff…

第10章 通信业务

文章目录 10.1.1 通信行业1、通信行业的界定2、通信行业的特点 10.1.2 通信企业10.1.3 通信终端1、通信终端的分类2、终端发展趋势 10.2.1 通信业务的定义及分类10.2.2 基础电信业务1、第一类基础电信业务A11 固定通信业务A12 蜂窝移动通信业务A13 第一类卫星通信业务A14 第一类…

探索设计模式的魅力:简单工厂模式

简单工厂模式(Simple Factory Pattern)是一种创建型设计模式,其主要目的是用于创建对象的实例。这种模式通过封装创建对象的代码来降低客户代码与具体类之间的耦合度。简单工厂不是GoF(四人帮)设计模式之一&#xff0c…

Vue Mixin 代码重用与逻辑共享

✨ 专栏介绍 在当今Web开发领域中,构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架,正是为了满足这些需求而诞生。它采用了MVVM架构模式,并通过数据驱动和组件化的方式,使…

二次封装el-upload组件包含文件上传进度条、复制粘贴上传等的功能

功能 1. 支持图片上传进度条 2. 支持粘贴上传图片行为 3. 支持最大图片上传数量 4. 支持图片大小限制 5. 支持图片类型限制 6. 支持图片预览 具体实现 图片上传进度条 由于 :on-progress 钩子没触发,因此使用了 :on-change 钩子代替实现。进度条的值先用定时器递增…

免费电子书全集分享

分享一个在github免费电子书集合,如果想学编程的,可以收藏,项目地址:free-programming-books

行为型设计模式——中介者模式

中介者模式 中介者模式主要是将关联关系由一个中介者类统一管理维护,一般来说,同事类之间的关系是比较复杂的,多个同事类之间互相关联时,他们之间的关系会呈现为复杂的网状结构,这是一种过度耦合的架构,即…

ruoyi-vue国产化适配之东方通TongHttpServer

1.将安装包解压 tar -zxvf TongHttpServer_6.0.0.2_x86_64.tar.gz 2.THS 主程序需要 license 才能启动,将 license.dat 文件放在 THS 目录内 3.启动主程序 4. http://IP:8000/ 账号:admin 密码:ths#123.com 5.可以在配置文件--文件编辑…

HFSS笔记/信号完整性分析(二)——软件仿真设置大全

文章目录 1、多核运算设置1.1 如何设置1.2 如何查看自己电脑的core呢?1.3 查看求解的频点 2、求解模式设置Driven Terminal vs Driven modal 3、Design settings4、自适应网格划分5、更改字体设置 仅做笔记整理与分享。 1、多核运算设置 多核运算只对扫频才有效果&…

STC8H8K蓝牙智能巡线小车——5.超声波测距(超声波检测障碍物)

超声波测距原理 所选超声波测距模组:HC-SR04 官方解释 HC-SR04 超声波测距模块可供 2cm提-400cm 的非接触式距离感测功能,测距精度可达高到 3mm;模块包括超声波发射器、接收器与控制电路。 基本工作原理 采用 IO 口 TRIG 触发测距&#…

ARM day2、day3 汇编

一、汇编学习:可以向上理解软件、向下感知硬件 二、符号(注释) 注释#注释(放在行首表示注释一行)/* */注释#数字立即数:一种标号(比如main: loop:).text .end换行…

2024 年 SEO 您需要了解的 8 个关键 SEO 趋势

SEO的未来正趋向于更加以用户为中心、合乎道德和技术先进的方法。 为什么? 人工智能 (AI) 和机器学习在搜索引擎中的兴起使他们能够更好地理解用户意图并提供更相关的结果Google 将经验、专业知识、权威性和可信度 (E-E-A-T&…

安全基础~web攻防特性1

文章目录 知识补充ASP安全Aspx安全分析与未授权访问php特性&web89~97靶场练习ctfshow 知识补充 使用thinkphp开发的框架,其首页访问指向public目录,指向其中的index.php文件 指向的index.php打开网页后是如下情况,代码如下 定义应用目…

计算机网络——第三层:网络层

1. IP数据报 1.1 IPV4数据报 1.1.1 IPv4数据报的结构 如图按照RFC 791规范显示了一个IPv4数据包头部的不同字段 IPv4头部通常包括以下部分: 1.1.1.1 版本(Version) 指明了IP协议的版本,IPv4表示为4。 1.1.1.2 头部长度&#x…

【机器学习入门】机器学习基础概念与原理

*(本篇文章旨在帮助新手了解机器学习的基础概念和原理,不深入讨论算法及核心公式) 目录 一、机器学习概念 1、什么是机器学习? 2、常见机器学习算法和模型 3、使用Python编程语言进行机器学习实践 4、机器学习的应用领域 二…

nxp s32k144芯片使用J-LINK程序刷写

1.nxp s32k144 (1)打开软件:J-Flash V6.30j (2)新建工程:file->new project (3)选择芯片型号和 target interface (4)可以保存芯片和接口配置 (5)打开程序:File->open data file (6)程序刷写:T…

Linux下安装Mysql【CentOS7 】

Linux下安装Mysql 一、Linux下安装Mysql-5.7.41【tar包下载安装】1.1.首先检查是否已经安装过mysql1.2.下载Linux版本的Mysql-5.71.3.解压缩1.4.安装执行 rpm 安装包需要先下载 openssl-devel 插件1.5.安装 Mysql5.7 执行 rpm 安装包1.6.Mysql相关操作命令1.7.查看Mysql-5.7 临…

Hadoop集群配置及测试

Hadoop集群配置及测试 NameNode与SecondaryNameNode最好不在同一服务器 ResourceManager较为消耗资源,因而和NameNode与SecondaryNameNode最好不在同一服务器。 配置文件 hadoop102hadoop103hadoop104HDFSNameNodeDataNodeDataNodeSecondaryNameNodeDataNodeYAR…

快速上手的 AI 工具-文心一言

简介 最近正打得火热的AIGC概念,相信大家肯定也都多少接触到了,那么AIGC概念股到底是什么呢?我个人最近也看了一些平台如:文心一言、通义千问、讯飞星火、豆包等等!各位朋友也千万不要错过啦,真是各有各的特…

VC++中使用OpenCV读取图像、读取本地视频、读取摄像头并实时显示

VC中使用OpenCV读取图像、读取本地视频、读取摄像头并实时显示 最近闲着跟着油管博主murtazahassan,学习了一下LEARN OPENCV C in 4 HOURS | Including 3x Projects | Computer Vision,对应的Github源代码地址为:Learn-OpenCV-cpp-in-4-Hour…