在vue中如果头像为空时用姓名第一个字当头像

业务场景:当个人资料或者用户头像没有图片时,默认使用户名字中第一个汉字做头像。

效果图:

完整代码:

 <el-avatarsize="large"    style="width: 45px; height: 45px; line-height: 45px; font-size: 24px"v-if="scoped.row.head_img == null"
>{{ scoped.row.name.charAt(0) }}
</el-avatar>

当头像为null时获取到姓名的第一个字。
重要代码:
scoped.row.name.charAt(0)
该代码是用来截取姓名的第一个字

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

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

相关文章

酷开科技智能大屏OS Coolita亮相第134届中国进出口商品交易会

作为中国外贸的“风向标”和“晴雨表”&#xff0c;广交会因其历史长、规模大、商品种类全、到会客商多、成交效果好&#xff0c;被称为“中国第一展”&#xff0c;它见证了中国改革开放的时代大潮与对外贸易的蓬勃发展。 2023年10月15日&#xff0c;第134届中国进出口商品交易…

财税服务展示预约小程序的作用是什么

财税财政往往困扰着很多公司&#xff0c;尤其是公司里没有相应职员或工作压力大的情况下&#xff0c;不少商家就会寻找代理记账、审计服务、会计代理等服务的机构。 对财政服务代理机构&#xff08;会计公司&#xff09;来说&#xff0c;市场企业多而广&#xff0c;理论上来说…

获取小程序页面路径完整流程

应用场景&#xff1a;因为所涉及的功能要跳转到滴滴打车小程序的代驾页面&#xff0c;而我并不知道他的appid和对应的页面路径&#xff0c;所以跟着我的步骤走下&#xff0c;这里拿滴滴打车小程序举例。 现在的话我们是拿到了小程序对应的appid了&#xff0c;接下来就去获取小程…

k8s存储卷 PV和PVC

目录 emptyDir存储卷 hostPath存储卷 nfs共享存储卷 PVC 和 PV 生命周期 一个PV从创建到销毁的具体流程如下&#xff1a; 静态pvc 动态pvc 3、定义PVC 4、测试访问 搭建 StorageClass NFS&#xff0c;实现 NFS 的动态 PV 创建 1、在stor01节点上安装nfs&#xff0…

一种优雅的调用第三方接口的思路及实现

之前的项目调用第三方接口时&#xff0c;往往用HttpUtils类似的静态方法调用。比较丑&#xff0c;不通用。如下&#xff0c;这是截取项目中某人调用的一段代码&#xff0c;非常不雅&#xff1a; 经改进后&#xff0c;采用了动态代理技术来实现&#xff0c;效果如下&#xff1a…

Presto资源管理之Resource Groups And Selector

文章目录 前言资源组配置选择器规则 Selector Rules全局配置 Global Properties选择器属性配置案例配置 prestoDb 前言 资源组对资源使用进行限制&#xff0c;并可以对在其中运行的查询执行队列策略&#xff0c;或将资源分配给子组。查询属于单个资源组&#xff0c;并且从该组…

android开发布局知识

插件开发的视频笔记&#xff1a;

宝塔部署QQ机器人,提示OpenSSL 1.0.2k-fips 26 Jan 2017

1、报错预览 Traceback (most recent call last):File "/www/wwwroot/python/bot-one/main.py", line 5, in <module>import requestsFile "/www/wwwroot/python/bot-one/343ae0eb0d491a10a1a00c0621b03ed0_venv/lib/python3.9/site-packages/requests/_…

投票助手图文音视频礼物打赏流量主小程序开源版开发

投票助手图文音视频礼物打赏流量主小程序开源版开发 图文投票&#xff1a;用户可以发布图文投票&#xff0c;选择相应的选项进行投票。 音视频投票&#xff1a;用户可以发布音视频投票&#xff0c;观看音视频后选择相应的选项进行投票。 礼物打赏&#xff1a;用户可以在投票过…

银行余额修改生成器,虚拟农业建设工商邮政中国,画板+取快照生成png高清图

在网上找了很多模版&#xff0c;一共好几个&#xff0c;然后都插入到了图片资源库里面&#xff0c;点击指定的单选框就会自动更换易语言画板上面的图片&#xff0c;然后模版上面都对应了指定的标签【透明状态覆盖了原有的字符】&#xff0c;然后在指定的参数上面对应加入了指定…

CSS实现文本左右对齐

因为文本里面有中午符号&#xff0c;英文&#xff0c;英文符号等&#xff0c;导致设置宽度以后右侧凌乱&#xff0c;可以通过以下代码设置样式&#xff0c;让文本工整对齐。 让我们看一下设置前和设置后的对比图片&#xff1a; 效果图如下&#xff1a;&#xff08;左边是设置…

1 快速了解Paimon数据湖核心原理及架构

1.1 什么是Apache Paimon Apache Paimon的前身属于Flink的子项目&#xff1a;Flink Table Store。 目前业内主流的数据湖存储项目都是面向批处理场景设计的&#xff0c;在数据更新处理时效上无法满足流式数据湖的需求&#xff0c;因此Flink社区在2022年的时候内部孵化了 …

C#查看启用或关闭的Windows功能

通过命令查看启用或关闭的Windows功能&#xff0c;以管理员身份打开powershell&#xff0c;输入命令get-windowsoptionalfeature -online 得出结果如下&#xff1a; 如果使用C#查看&#xff0c;需要先安装System.Management 代码如下&#xff1a; private void isInstall() …

已解决:rm: 无法删除“/opt/module/zookeeper-3.4.10/zkData/zookeeper_server.pid“: 权限不够

解决&#xff1a; ZooKeeper JMX enabled by default Using config: /opt/module/zookeeper-3.4.10/bin/../conf/zoo.cfg Stopping zookeeper ... /opt/module/zookeeper-3.4.10/bin/zkServer.sh: 第 182 行:kill: (4149) - 不允许的操作 rm: 无法删除"/opt/module/zooke…

20231108在Ubuntu22.04下编译安装cmake-3.27.7.tar.gz

20231108在Ubuntu22.04下编译安装cmake-3.27.7.tar.gz 2023/11/8 17:28 缘起&#xff0c;编译cv180zb的时候提示说cmake的版本低&#xff01; OBJCOPY platform/generic/firmware/payloads/test.bin OBJCOPY platform/generic/firmware/fw_dynamic.bin OBJCOPY platfor…

【FPGA】正确处理设计优先级--或许能帮你节省50%的资源

概述 假如现在有一种方法–可以在不怎么需要修改已有设计的情况下&#xff0c;就可以帮您节省50%的设计资源&#xff0c;那你会试试看吗&#xff1f; 当前市场环境下&#xff0c;更低廉的成本却可获得同等性能无疑是极具诱惑的。本文将介绍一种FPGA设计技术&#xff0c;该技术…

【Linux网络】2分钟学习centos7永久修改网卡名称

目录 第一步&#xff0c;先查看网卡名称 第二步&#xff1a;先修改配置文件/etc/default/grub&#xff0c;添加net.ifnemes0 第三步&#xff1a;重新加载内核配置grub2-mkconfig -o /boot/grub2/grub.cfg 第四步&#xff1a;重启电脑 第五步&#xff1a;查看网卡名称&…

微带线的ABCD矩阵的推导、转换与级联-Matlab计算实例

微带线的ABCD矩阵的推导、转换与级联-Matlab计算实例 散射参数矩阵有实际的物理意义&#xff0c;但是其无法级联计算&#xff0c;但是ABCD参数和传输散射矩阵可以级联计算&#xff0c;在此先简单介绍ABCD参数矩阵的基本用法。 1、微带线的ABCD矩阵的推导 其他的一些常用的二端…

应用在便携式多媒体播放器中的音频Codec芯片

便携式多媒体播放器(PMP&#xff0c;Portable Media Player)&#xff0c;也就是通常人们所说的MP4。PMP的主要优点是&#xff1a;携带方便&#xff0c;能够直接播放高品质音/视频文件&#xff1b;也可以浏览图片&#xff0c;以及作为移动硬盘使用&#xff1b;此外&#xff0c;P…

【面试经典150 | 位运算】二进制求和

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;模拟 其他语言c 写在最后 Tag 【二进制】【位运算】 题目来源 67. 二进制求和 题目解读 以二进制字符串的形式返回两个二进制字符串的和。 解题思路 看到这个题目首先想到的方法可能是先把二进制字符转化成 int 型数…