涨芝士:三元运算符里嵌套三元运算符与Vue的template里调用methods的方法

背景前提:
某个需求优化,用户头像要做逻辑判断,后端接口返回两个字段,一个字段是userImage(用户自己上传的头像),
另一个是sexImage(性别头像:男和女)

逻辑一: 若userImage有值就直接显示 userImage:‘xxxxx’ 的头像,后面的性别头像就不管了

逻辑二: 前面的 userImage:“ ” ,就取性别头像, sexImage:“man” (男生头像), sexImage：“woman” (女生头像)

逻辑三: 若 usrImage:" " 和 sexImage:" " 都为空的,就取自定义的默认头像 defaultImage

这个时候就会用到标题里所说的了

三元运算符方案

template代码

<!-- user-info为子组件 -->
 <user-info :imgUrl="reaData.userImage?reaData.userImage:(reaData.sexImage === 'man'?manImg:reaData.sexImage === 'woman'?womanImg:defaultImg)">
 </user-info>

script代码

import defaultImg from '@/assets/image/user-icon.png'
import manImg from '@/assets/image/manImg.png'
import womanImg from '@/assets/image/womanImg.png'

data () {
     
    return {
     
      defaultImg,
      manImg,
      womanImg,
      resData:{
     }
    }
  },

template里调用methods的方案

template代码

 <user-info :imgUrl=urlImg()>
 </user-info>

script代码

import defaultImg from '@/assets/image/user-icon.png'
import manImg from '@/assets/image/manImg.png'
import womanImg from '@/assets/image/womanImg.png'

data () {
     
    return {
     
      defaultImg,
      manImg,
      womanImg,
      resData:{
     }
    }
  },

methods: {
     
    urlImg () {
     
      if (this.resData.userImage) {
     
        return this.resData.pciImage
      } else if (this.resData.sexImage === 'man') {
     
        return manImg
      } else if (this.resData.sexImage === 'woman') {
     
        return womanImage
      } else {
     
        return defaultImg
      }
    }
  }