v-for를 사용하여 Vue를 통해 src 속성에 값을 할당하는 방법(자세한 튜토리얼)

아래에서는 Vue가 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 tag, 정상적으로 사용 가능합니다

위 내용은 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

JS에서 불규칙한 다차원 배열의 순회를 구현하는 방법

Vue 프로젝트가 eslint 검증을 끕니다

vue에서 코드 사양 감지를 제거하는 두 가지 방법

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