if문

이었나..

---

20240329

for문

pdf p18

v-for

기본구조

:key="it"는 v-bind:key="it"를 줄인 것

<template>
  <div>
    <h1>2024-03-29 실무프로젝트(p-1)</h1>
    <!-- 표 그리기 = 게시판 -->
    <div v-for="it in arr" :key="it">
      <button>{{ it }}</button>
    </div>
  </div>

</template>

<script>


export default {
  name: 'App',
  components: {
  }, 
  data() {
    return {
      arr : [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    }
  }
}
</script>

게시판 글 옮기자

items는 배열의 아이템으로 json이 들어간다.

<template>
  <div>
    <h1>2024-03-29 실무프로젝트(p-1)</h1>
    <!-- 표 그리기 = 게시판 -->
    <div v-for="(it, index) in arr" v-bind:key="index">
      <button>{{ index }} : {{ it }}</button>
    </div>

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

    <table border="1">
      <tr>
        <th>번호</th>
        <th>제목</th>
        <th>글쓴이</th>
        <th>날짜</th>
        <th>읽음</th>
      </tr>
      <tr v-for="i in 10" v-bind:key="i">
        <td v-text="i"></td>
        <td>제목{{ i }}</td>
        <td>쟝원영{{ i }}</td>
        <td>2024-03-29</td>
        <td v-text="i * 10"></td>
      </tr>
    </table>

  </div>

</template>

<script>


export default {
  name: 'App',
  components: {
  }, 
  data() {
    return {
      arr : [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
      items : [
        {boardNo : 10, title : '10번 글입니다', writer: '쟝원영', date: '2024-03-29', read:35},
        
      ]
    }
  }
}
</script>