チーズを上げる:3元演算子に3元演算子とVueのtemplateをネストしてmethodsを呼び出す方法
6499 ワード
背景前提:ある需要最適化、ユーザーの顔は論理判断を行い、バックエンドインタフェースは2つのフィールドを返し、1つのフィールドはuserImage(ユーザーが自分でアップロードした顔)、もう1つはsexImage(性別の顔:男性と女性)である.
論理1:userImageに値があればuserImage:『xxxx』の顔を直接表示し、後ろの性別の顔は放っておく
論理2:前のuserImage:「」は、性別のアイコンを取り、sexImage:「man」(男性アイコン)、sexImage:「woman」(女性アイコン)
ロジック3:usrImage:'''とsexImage:'''が空の場合は、カスタムのデフォルトのアイコンdefaultImageを取得します.
この時はタイトルに書いてある
さんげんえんざんしほうしき
templateコード
scriptコード
templateでmethodsを呼び出すシナリオ
templateコード
scriptコード
論理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
}
}
}