Vue.js는 img의 src에 값을 동적으로 할당합니다.

이제 img에 src 값을 동적으로 할당하는 Vue.js 메서드를 공유하겠습니다. 이는 좋은 참조 값을 가지고 있으며 모든 사람에게 도움이 되기를 바랍니다.

요구 사항은 다음과 같습니다.

ajax는 다음과 같이 데이터를 가져옵니다

{
 "code": "200",
 "data": {
  "SumAmount": 200,
  "List": [{
   "amount": 100,
   "sex": "male",
   "fee": 1,
   "id": 98,
   "status": 2,
   "time": "2015-08-11"
  }, {
   "amount": 100,
   "sex": "female",
   "fee": 0,
   "id": 8,
   "status": 2,
   "time": "2015-06-12"
  }]
 },
 "msg": "success"
}

그런 다음 목록을 페이지에 렌더링합니다. 남성인 경우 img의 src를 "images"로 설정합니다. /male.png", 그렇지 않으면 "images/female.png"로 설정

둘 다 가능합니다. HTML에서 좀 더 편안하게 보이려면 필터를 사용하세요. 판단 논리일 뿐이지만 판단에 URL을 추가합니다. 물론 이는 개인적인 습관일 뿐입니다. 해당 필터를 이해하기 위해 직접 명령을 사용하세요

<img v-attr="src: sex==&#39;male&#39;?&#39;images/male.png&#39;:&#39;images/female.png&#39;">
<img v-attr="src: sex | isM">

제가 추천하는 것을 적어주세요:

우선 남자와 여자는 이렇습니다. 마크는 장식적인 내용이므로 CSS로 작성하는 것이 좋습니다. 즉, 배경 이미지 형식을 사용하여 실제 남성과 여성을 제어합니다

filters: {
   isM: function (val) {
     return val == 'male' ? 'images/male.png' : 'images/female.pn'
   }
  }

Vue 구성 요소에서 axios를 사용하는 방법

axios 제출 양식 데이터 예시

vue-router 관련 기본 지식 및 작동 원리

위 내용은 Vue.js는 img의 src에 값을 동적으로 할당합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!