没有头像的情况下显示用户名的第一个字

有头像显示头像 没有头像显示用户名的第一个字

<img v-if="avatar" :src="avatar" class="user-avatar" />

<span v-else class="username">{{ name.charAt(0) }}</span>

.username {

          width: 30px;

          height: 30px;

          line-height: 30px;

          text-align: center;

          background-color: #04c9be;

          color: white;

          border-radius: 50%;

          margin-right: 4px;

        }

若用户名为空，name.charAt(0)会报错，使用vue模板可选链操作符。就不会报错了。

 <!-- native事件的修饰符 -->

          <!-- 注册组件的根元素的原生事件（h5事件） -->

          <!-- el-dropdown-item 是没有click事件的 -->

          <el-dropdown-item @click.native="logout">

            <span style="display: block">退出</span>

          </el-dropdown-item>