头像空白问题

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

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

变量名.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.hqwc.cn/news/412834.html

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

相关文章

011:vue结合css动画animation实现下雪效果

文章目录 1. 实现效果2. 编写一个下雪效果组件 VabSnow.vue3. 页面使用4. 注意点 1. 实现效果 GIF录屏文件太卡有点卡&#xff0c;实际是很丝滑的 2. 编写一个下雪效果组件 VabSnow.vue 在 src 下新建 components 文件&#xff0c;创建VabSnow.vue组件文件 <template>…

第三届iEnglish全国ETP大赛展现教育游戏新趋势

随着社会步入数字化纪元,游戏作为信息交流和传播的重要载体,在教育领域的潜能日益凸显。特别是寓教于乐的“教育游戏”学习方式让更多家长和孩子体验到“玩中学,学中玩”的乐趣,在教育领域的潜能也日益凸显。 本周五(1月19日)晚上7点,国内首个教育游戏赛事、以“玩转英语,用iE…

在国外外出结账时应该怎样表述,柯桥生活英语学习

大家平时外出就餐时&#xff0c;尤其是那种外国餐厅&#xff0c;结账时都怎么表达&#xff1f;可能大家会脱口而出“how much”..... 如果你真的这么说&#xff0c;那可就“踩雷”了。因为&#xff0c;在歪果仁的文化中&#xff0c;用how引导的疑问句都或多或少涉及隐私问题&am…

触发器简述

数据库是与表有关的数据库对象&#xff0c;在执行insert&#xff0c;delete&#xff0c;update之前或之后&#xff0c;触发并执行触发器中定义的sql语句集合&#xff0c;来保证数据的完整性等操作,目前只支持行级触发器&#xff0c;而不支持语句触发器。 触发器的语法&#xff…

线程同步--生产者消费者模型

文章目录 一.条件变量pthread线程库提供的条件变量操作 二.生产者消费者模型生产者消费者模型的高效性基于环形队列实现生产者消费者模型中的数据容器 一.条件变量 条件变量是线程间共享的全局变量,线程间可以通过条件变量进行同步控制条件变量的使用必须依赖于互斥锁以确保线…

Pure-admin框架 Pure-table中获取所选中的内容的信息

最近在尝试使用Pure-admin框架来进行开发&#xff0c;正好遇到了多选表格需要获取选中项的id的情况&#xff0c;因为平台介绍说是二次封装 element-plus 的 Table &#xff0c;直接拿el-table的方法来试 在table上设置属性ref"multipleTableRef" let idArr [];mult…

centos7 arm服务器编译升级安装动态库libstdc++.so.6,解决GLIBC和CXXABI版本低的问题

前言 由于centos7内置的libstdc.so.6版本太低&#xff0c;导致安装第三方包的时候&#xff0c;会报“CXXABI_1.3.8”不存在等问题。 自带的打印如下&#xff1a; strings /usr/lib64/libstdc.so.6 | grep GLIBC strings /usr/lib64/libstdc.so.6 | grep CXXABI 如图 升级 注…

Pytorch实战——3、数据加载与处理

&#x1f345; 写在前面 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;这里是hyk写算法了吗&#xff0c;一枚致力于学习算法和人工智能领域的小菜鸟。 &#x1f50e;个人主页&#xff1a;主页链接&#xff08;欢迎各位大佬光临指导&#xff09; ⭐️近…

Linux操作系统----gdb调试工具(配实操图)

绪论​ “不用滞留采花保存&#xff0c;只管往前走去&#xff0c;一路上百花自会盛开。 ——泰戈尔”。本章是Linux工具篇的最后一章。gdb调试工具是我们日常工作中需要掌握的一项重要技能我们需要基本的掌握release和debug的区别以及gdb的调试方法的指令。下一章我们将进入真正…

【4k】4k的webrtc播放示例

目录 使用带研发角色的账号&#xff0c;在app端设置下分辨率 &#xff1a; 4k 点播 ffplay播放看下详细的参数 使用带研发角色的账号&#xff0c;在app端设置下分辨率 &#xff1a; 4k 点播 ffplay播放看下详细的参数

机器学习---特征选择与稀疏学习

1. 特征 特征&#xff1a;描述物体的属性。 特征的分类&#xff1a;相关特征: 对当前学习任务有用的属性&#xff1b;无关特征: 与当前学习任务无关的属性 特征选择&#xff1a;从给定的特征集合中选出任务相关特征子集&#xff1b;必须确保不丢失重要特征。 原因&#xff…

Mysql中设置只允许指定ip能连接访问(可视化工具的方式)

场景 Mysql中怎样设置指定ip远程访问连接&#xff1a; Mysql中怎样设置指定ip远程访问连接_navicat for mysql 设置只有某个ip可以远程链接-CSDN博客 前面设置root账户指定ip能连接访问是通过命令行的方式&#xff0c;如果通过可视化工具比如Navicat来实现。 注&#xff1a…