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가지 방법으로 사용 했는데

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

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

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

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