技術標籤：專案開發歷程vue.jsjavascript前端

背景前提:
某個需求優化,使用者頭像要做邏輯判斷,後端介面返回兩個欄位,一個欄位是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
      }
    }
  }