在Vue中,可以通过设置条件来判断用户是否有直播头像。如果用户没有直播头像,则显示默认头像。
首先,需要定义一个变量来存储用户的直播头像路径或者URL地址。然后,使用v-if指令根据该变量的值来判断是否显示默认头像。
下面是一个示例代码:
<template>
<div class="live">
<!-- 其他内容 -->
<img v-if="userAvatar" :src="userAvatar" alt="用户头像">
<img v-else src="/path/to/default_avatar.jpg" alt="默认头像">
<!-- 其他内容 -->
</div>
</template>
<script>
export default {
data() {
return {
userAvatar: '' // 初始化为空字符串
}
},
mounted() {
// 获取用户信息并更新userAvatar变量
this.$axios.get('/api/user')
.then(response => {
if (response.data && response.data.avatar) {
this.userAvatar = response.data.avatar;
} else {
this.userAvatar = '';
}
})
.catch(error => {
console.log('Error:', error);
});
}
}
</script>
上述代码中,mounted()
生命周期钩子函数会在组件加载完成时调用。在这里我们发送了一个GET请求到服务器获取用户信息,包括头像路径(或URL)。如果返回结果中有头像路径,就将其保存到userAvatar
变量中;否则,将userAvatar
设置为空字符串表示无头像。
接下来,使用v-if
指令来判断userAvatar
的值。如果不为空,则显示用户自定义的头像图片;反之,显示默认头像图片。