チーズを上げる:3元演算子に3元演算子とVueのtemplateをネストしてmethodsを呼び出す方法


背景前提:ある需要最適化、ユーザーの顔は論理判断を行い、バックエンドインタフェースは2つのフィールドを返し、1つのフィールドはuserImage(ユーザーが自分でアップロードした顔)、もう1つはsexImage(性別の顔:男性と女性)である.
論理1:userImageに値があればuserImage:『xxxx』の顔を直接表示し、後ろの性別の顔は放っておく
論理2:前のuserImage:「」は、性別のアイコンを取り、sexImage:「man」(男性アイコン)、sexImage:「woman」(女性アイコン)
ロジック3: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
      }
    }
  }