240329 Vue

표 그리기

먼저 App.vue 에 data 집어넣기

data() {
  // App.vue 안에서 쓸 데이터
  return {
    arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  };
}

 

화면에 출력해보기

<div v-for="it in arr" v-bind:key="it">
  <div>{{ it }}</div>
</div>

 

v-bind 란 무엇일까..

https://goodteacher.tistory.com/532

[vue 3] 04. v-bind를 통한 속성 처리

 

1 부터 10 까지 출력해보기

<div v-for="i in 10" v-bind:key="i">
  <div>{{ i }}</div>
</div>

 

arr 에 들어있는 값을 출력한 것과 같이 확인 해볼 수 있다

 

배열의 index 값과 배열의 index번의 값 출력하기

<div v-for="(it, index) in arr" :key="index">
  <div>{{ index }} : {{ it }}</div>
</div>

 

it 와 index 의 순서를 변경하면 앞뒤가 변경된다.

 

배열에 글 담고 table 에 출력해보기

items: [
        { boardNo: 10, title: "제목10", writer: "작성자10", date: "2024-03-29", read: 10, },
        { boardNo: 9, title: "제목9", writer: "작성자9", date: "2024-03-29", read: 9, },
        { boardNo: 8, title: "제목8", writer: "작성자8", date: "2024-03-29", read: 8, },
      ],

 

테이블에 반복문 출력하기

<tr v-for="i in items" :key="i">
  <td>{{ i.boardNo }}</td>
  <td>{{ i.title }}</td>
  <td>{{ i.writer }}</td>
  <td>{{ i.date }}</td>
  <td>{{ i.read }}</td>
</tr>

 

구구단 출력하기

<div v-for="i in 8" :key="i">
  <span v-for="j in 9" :key="j" v-text="(i + 1) * j"></span>
</div>

span {
  margin: 0 2px;
}

 

2단 ~ 9단까지 출력된 모습