[Vue.js]5.배열,v-for,v-if,테이블,셀렉트박스 사용하기

지난번 포스팅에 이어서

template, script 부분을 다뤄보겠습니다.

 

1. 배열

data부분에 배열을 추가할 수 있습니다.

data() {
    return {
      name: "subari",
      input: "text",
      options: [
        { v: "R", t: "Red" },
        { v: "B", t: "Blue" },
        { v: "G", t: "Green" },
      ],
      color: "R",
    };
  },

이 배열을 순회하기 위해서, vue에는 반복문 역할을 하는 v-for가 있습니다.

v-for="(d, i) in options"

python의 for i in n 과 비슷한 문법입니다.

options 배열안에서 반복문이 돌아가고, 

d는 data,  i는 index를 나타냅니다.

현재 배열의 한요소는 v, t 두가지 값을 가지고 있으므로

d.t , d.v로 접근 할 수 있습니다.

 

배열을 이용하여 select문을 만들어보겠습니다.

<select class="form-control">
      <option :key="i" :value="d.v" v-for="(d, i) in options">{{ d.t }}</option>
</select>

 

v-for 사용 시 :key는 필수요소이기 때문에 추가해주었습니다.

d.t 위치에는 반복문을 통해 각각 Red, Blue, Green이 오게 됩니다.

 

About.vue

<template>
  <div>
    <h1>About {{ name }}</h1>
    <input type="text" v-model="input" />
    <button type="button" @click="getData">get</button>
    <button type="button" @click="setData">set</button>

    <select class="form-control">
      <option :key="i" :value="d.v" v-for="(d, i) in options">{{ d.t }}</option>
    </select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "subari",
      input: "text",
      options: [
        { v: "R", t: "Red" },
        { v: "B", t: "Blue" },
        { v: "G", t: "Green" },
      ],
    };
  },
  methods: {
    getData() {
      alert(this.input);
    },
    setData() {
      this.input = "data";
    },
  },
};
</script>

/about

/about

반복문을 통해, 옵션이 3가지 추가된 것을 볼 수 있습니다.

---

2. @change

이번에는 선택된 옵션 값에 따라 변수가 업데이트 되도록 해보겠습니다.

 

<select class="form-control" v-model="color" @change="changeColor">
  <option :key="i" :value="d.v" v-for="(d, i) in options">{{ d.t }}</option>
</select>

@change는 값이 변할 때마다 수행할 동작을 나타냅니다.

v-model값으로 color라는 변수를 두고, 값이 업데이트 될 때마다 changeColor함수를 호출합니다.

<script>
export default {
  data() {
    return {
    
      ...
      
      color: "R",
    };
  },
  methods: {
  
    ...
    
    changeColor() {
      alert(this.color);
    },
  },
};
</script>

changeColor함수는 color변수를 알림창에 띄우도록 했습니다.

 

About.vue

<template>
  <div>
    <h1>About {{ name }}</h1>
    <input type="text" v-model="input" />
    <button type="button" @click="getData">get</button>
    <button type="button" @click="setData">set</button>

    <select class="form-control" v-model="color" @change="changeColor">
      <option :key="i" :value="d.v" v-for="(d, i) in options">{{ d.t }}</option>
    </select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "subari",
      input: "text",
      options: [
        { v: "R", t: "Red" },
        { v: "B", t: "Blue" },
        { v: "G", t: "Green" },
      ],
      color: "R",
    };
  },
  methods: {
    getData() {
      alert(this.input);
    },
    setData() {
      this.input = "data";
    },
    changeColor() {
      alert(this.color);
    },
  },
};
</script>

about

Blue로 변경하면 B가 color변수에 저장됩니다.

---

3. 테이블 

마지막으로 테이블입니다.

<table class="table table-bordered" v-if="tableShow">
  <tr :key="i" v-for="(d, i) in options">
    <td>{{ d.v }}</td>
    <td>{{ d.t }}</td>
  </tr>
</table>

v-if는 조건이 충족하면 해당 요소를 보여주고, 아니면 보여주지 않습니다.

tableShow에 true / false를 지정하면 됩니다.

 

💡v-show

v-if와 비슷한 기능을 하지만 조건 충족이 안되었을 때

v-show는 렌더링을 하고 보여주지 않는 것, v-if는 렌더링을 하지 않는 것이라고 보면 됩니다.

 

About.vue

<template>
  <div>
    <h1>About {{ name }}</h1>
    <input type="text" v-model="input" />
    <button type="button" @click="getData">get</button>
    <button type="button" @click="setData">set</button>

    <select class="form-control" v-model="color" @change="changeColor">
      <option :key="i" :value="d.v" v-for="(d, i) in options">{{ d.t }}</option>
    </select>
    
    <table class="table table-bordered" v-if="tableShow">
      <tr :key="i" v-for="(d, i) in options">
        <td>{{ d.v }}</td>
        <td>{{ d.t }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "subari",
      input: "text",
      options: [
        { v: "R", t: "Red" },
        { v: "B", t: "Blue" },
        { v: "G", t: "Green" },
      ],
      color: "R",
      tableShow: true,
    };
  },
  methods: {
    getData() {
      alert(this.input);
    },
    setData() {
      this.input = "data";
    },
    changeColor() {
      alert(this.color);
    },
  },
};
</script>

/about

현재, tableShow 변수를 true로 설정했기때문에 테이블이 나타나고,

false로 설정하게 된다면 테이블이 나타나지 않습니다.

 

여기까지 Vue 포스팅은 마무리되었습니다.

감사합니다^-^