v-select를 이용한 div 영역 결정

1. select할 배열의 목록을 name과 value로 두고 원하는 값으로 설정.

  items: [
        { name: "시간으로 계산", value: "t" },
        { name: "공정 개수로 계산", value: "n" },
      ],​

2. @change를 이용해 v-select에서 변화를 감지, 즉 사용자가 원하는 카데고리를 선택하게 되면 SelectMode 함수가 실행되게 세팅.

<v-select
                  :items="items"
                  label="종료 시간 계산"
                  item-text="name"
                  item-value="value"
                  @change="SelectMode($event)"
                ></v-select>

3. 함수에서 원하는 div 영역의 id를 items의 value와 비교하여 해당 영역의 display 스타일을 block 혹은 none으로 설정.

  SelectMode(event) {
      if (event == "t") {
        document.getElementById("time").style.display = "block";
        document.getElementById("gong").style.display = "none";
      } else if (event == "n") {
        document.getElementById("gong").style.display = "block";
        document.getElementById("time").style.display = "none";
      }
    },

 

* 두 div의 영역은 초반에 display none으로 해둬야 함.

* 다양한 사용 방법이 있을 것이라 예상됨.