# v-for에서 Vue 초보자-data 배열 값을 표시합니다.

3662 단어 Vue.js

NOTE


요소의 순서를 직접 지정하여 값을 사용할 수 있습니다.
예:{{ posts[0].id }} (수조의 첫 번째 원소)
모든 요소 확장 가능
v-for의:key="post.id" 저는 이 예에서 필요없다고 생각하지만 안 쓰면 Lint한테 혼나요. 그래서 썼어요.

Code

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>{{ posts[0].id }} {{ posts[0].title }}</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ]
    }
  }
}
</script>


View



Original by Github issue

좋은 웹페이지 즐겨찾기