使用Vue的条件渲染和计算属性判断有无图片
判断有无遍历出图片,如果无就显示本地上传的默认图片
<view class="card-body"> <image :src="activity.coverUrl" alt="activity cover"/> </view>
要在Vue.js中实现在没有遍历出图片时显示默认图片,你可以使用Vue的条件渲染和计算属性。首先,你可以创建一个计算属性来判断是否存在activity.coverUrl
,如果存在则返回该URL,否则返回默认图片的URL。然后,在模板中使用条件渲染来根据计算属性的结果显示对应的图片。
代码:
<template>
<view class="card-body">
<img :src="coverImage" alt="activity cover" />
</view>
</template>
<script>
export default {
data() {
return {
activity: {
coverUrl: null, // 假设coverUrl是活动封面图片的URL
},
defaultImageUrl: '默认图片的URL',
};
},
computed: {
coverImage() {
return this.activity.coverUrl ? this.activity.coverUrl : this.defaultImageUrl;
},
},
};
</script>