v-for문 다시연습

3일 쉬고 왔더니 피곤 하네여ㅎㅎ
(오늘만 일하면 내일 또 쉰다.!!!!!!)

오늘은 v-for문 공부한거 조금 적어보려합니다.

바로 적어 보겠습니다.

---

<template>
  <q-page class="bg-white text-black q-pa-md">
    <div v-for="item in  userDtoList" class="full-width">
<!--      <div>{{item}}</div>-->
      <div>id : {{item.id}} name : {{item.name}}</div>
<!--      <div>{{item.books[0].id}}{{item.books[0].name}}</div>-->
      <div v-if="item.name != '김'" v-for="book in item.books">
        <div v-if="book.name !=''">{{book.name}}</div>
      </div>
      <hr/>
    </div>
    <div>
      {{this.iteration(userDtoList)}}
    </div>
  </q-page>
</template>

<script>
  export default {
    data(){
      return{
        userDtoList : [
          {id : 1, name : "김", books :[
              {id : 1, name : "맥심"},
              {id : 3 ,name : "html의 이해"},
              {id : 4 ,name : "css에 대하여"},
            ],
          },

          {id : 2,name :"박",books: [
              {id : 1,name :"맥심"},
              {id : 3 ,name : "html의 이해"},
            ]
          },
          {id : 3, name : "최",books :[
            {id : 2,name :"이더리움"},
            {id : 5,name :"비트코인"},
            {id : 6,name :"비트토렌트"},
            {id : 7,name :"도지코인"},
            ]
          }
          ]
        ,
      }
    },

    name: 'Main',
    computed:{
      ...mapGetters([
        'getLayout'
      ])
    },

    methods:{
      ...mapMutations([]),
      ...mapActions([]),
      iteration(items){
        for (let i =0 ;i<items.length ;i++){
          console.log(items[i]);
        }

        for(let item of items){
          console.log(item)
        }
        for(let item in items){
          console.log(item)
        }

      }
    },
  }
</script>

---

보시면 간단한 예제 입니다. ㅎ

id 뭐고 name이 뭔지 알수 있습니다.
하지만 books 같은경우 한번더 v-for을 돌린 이유는??

배열 안에 배열이기때문에 v-for문을 돌려서 적은 겁니다.

잘보면 간단하다 생각을 할수도 있지만..
초보라..; 헷갈려요 아직 ㅋ...

v-if는 왜썼냐 하실수도 있지만 v-if는 어느 부분을 안보여주려고 사용한 것입니다.
나중에 기호?? != || == 등등 이러한것을 한번 설명 글 써보겠습니다 ㅎㅎ

2번재는 구구단 입니다.
v-for문을 사용 하여 만들어본 구구단입니다.

<template>
  <q-page>
    <div>
<!--      v-for문 한번 타이핑 하기.-->
<!--      <div v-for="(dan,index) in number([])">-->
      <div v-for="(dan,index) in 9">
<!--        <div v-if="dan !=1 " v-for="number in 9">-->
<!--          <div>{{dan}} x {{number}} = {{dan * number}}</div>-->
<!--        </div>-->
        {{index+=1}}
        <div v-if="index % 2 ==0" v-for="number in 9">
          <div>{{dan}} * {{number}} = {{dan * number}}</div>
        </div>
        <hr/>
      </div>
    </div>
  </q-page>
</template>

<script>
  export default {
    data(){
      return{
        dan :[]
      }
    },
    methods:{
      number(num){
        for(let i =4; i< 10;i+=1){
          num.push(i);
        }
        return num;
      }
    }
  }

</script>

<style scoped>

</style>

2가지 방법으로 사용 했는데

주석 친곳은 메소드를 이용하여 만든 내용입니다.

첫번째 설명을 조금 이해하면 바로 구구단도 가볍게 사용하실수 있다 생각합니다..

---

오늘은 여러 작업들이 많아 짧게 적어봤는데요.
다음에 반복문을 가지고 설명 한번 드려보겟습니다 ㅎㅎ

(서울) 비오는데 빗길 조심하시고 오늘도 화이팅 하세요 !