이번에는 v-for이다.

 

v-for문을 통해서 반복문을 돌면서 출력하거나 처리를 한다.

 

아래와 같이 코드작성

<body>
  <div id="app">
    <ul>
      <li v-for="n in numbers">{{ n }}</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var firstApp = new Vue({
      el: "#app",
      data: {
        numbers: [1, 2, 3, 4, 5, 6, 7],
      },
    });
  </script>
</body>

 

data안에 number 배열을 선언해두고 v-for문을 통해서 출력하는형태이다. 형태자체가 어렵지 않은데 익숙하지 않아서 계속해서 사용해봐야한다.

v-for문은 배열뿐만 아니라 객체도 출력이 가능하다.

<body>
  <div id="app">
    <table>
      <tbody>
        <tr v-for="item in sample">
          <td>{{item.data1}}</td>
          <td>{{item.data2}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var firstApp = new Vue({
      el: "#app",
      data: {
        sample: [
          {
            data1: "sample1",
            data2: 30,
          },
          {
            data1: "sample2",
            data2: 40,
          },
          {
            data1: "sample3",
            data2: 50,
          },
        ],
      },
    });
  </script>
</body>

일전에 배웠던 v-if문과 합쳐서도 사용이 가능하다.

<body>
  <div id="app">
    <table>
      <tbody>
        <tr v-for="item in sample" v-if="item.data2 > 30">
          <td>{{item.data1}}</td>
          <td>{{item.data2}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var firstApp = new Vue({
      el: "#app",
      data: {
        sample: [
          {
            data1: "sample1",
            data2: 30,
          },
          {
            data1: "sample2",
            data2: 40,
          },
          {
            data1: "sample3",
            data2: 50,
          },
        ],
      },
    });
  </script>
</body>

v-for문 안에 v-if로 조건을 주었다. 이렇게되면 item.data2가 30 이하인것들만 출력되게 된다.

 

 

티스토리툴바