v-for를 사용하여 src 속성에 값을 할당하는 방법

이번에는 v-for를 사용하여 src 속성에 값을 할당하는 방법과 v-for를 사용하여 src 속성에 값을 할당할 때 주의사항이 무엇인지 보여드리겠습니다. , 살펴 보겠습니다.

내 코드 구조는 아래 코드와 같아서 실행할 수 없습니다. img의 src 속성에는 Mustache 표기법을 사용할 수 없습니다

<p id="test">
  <p v-for="item in lists">
    <img src="{{item.img}}">
  </p>
</p>

new Vue({
  el: "#test",
  data: function () {
    return {
      lists: [
        { img : 'img1' },
        { img : 'img2' },
        { img : 'img3' },
        { img : 'img4' }        
      ]
    }
  },
})

나중에 html의 코드를 다음과 같이 변경했습니다

<p id="test">
  <p v-for="item in lists">
    <img v-bind:src="item.img">
  </p>
</p>

v -bind 태그, 정상적으로 사용할 수 있습니다

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Vue.directive()에 대한 자세한 그래픽 설명

Vue 렌더링 및 플러그인 로딩 작업 순서

위 내용은 v-for를 사용하여 src 속성에 값을 할당하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!