[HTML] for문, 이벤트, 변수,

HTML for문

<div v-for="(data, index) in dataList" :key="myKey" class="item">

html에서 포문은 위와같이 쓸 수 있다.

dataList에서 값을 하나씩 가져와서 값은 data에, 인덱스는 index에 넣는다.

key는 데이터들을 구분해주는 값으로서 항상 넣어야 한다.

 

이벤트(@)

<!--클릭하면 flag를 true로 만들어준다-->
@click="flag=true;"

이벤트를 받을떄는 "@"를 붙여준다.

 

변수대입(:)

<!-- 변수를 쓸때-->
<img :alt="data.name">

<!-- 그냥 데이터를 쓸때-->
<div class="info">

어떤 속성값에 값이 아닌 변수를 넣을땐 앞에 콜론(:)을 붙여준다.

 

text부분에 변수를 넣기("{{}}")

<p>장르: {{ movie.category }}</p>

텍스트가 나오는 부분에 변수를 쓰고실으면 중괄호로 두번 감싼다

 

예시

<div v-for="(movie, i) in data" :key="i" class="item">
    <figure>
      <img :src="`${movie.imgUrl}`" :alt="movie.title">
    </figure>
    <div class="info">
      <h3 class="bg-yellow">{{ movie.title }}</h3>
      <p>장르: {{ movie.category }}</p>
      <button @:click="increseLike(i)">좋아요
      </button>
      <span>{{ movie.like }}</span>
      <p>
        <button @click="isModal=true; selectedMovie=i">상세보기</button>
      </p>
    </div>
  </div>