[Vue.js] 조건문, 반복문, 객체 데이터 추출

조건문

 

: v-if, v-else-if, v-else로 작성한다. v-if 조건에 해당하는 태그만 렌더링된다. 

 

app.html 

    <div id="oddneven">
        <input type="text" v-model="number"/>
        <p v-if="number==''">값을 입력해 주세요.</p>
        <p v-else-if="number==0">1이상의 숫자를 입력해 주세요.</p>
        <p v-else-if="number%2==0">짝수입니다.</p>
        <p v-else>홀수입니다.</p>
    </div>

 

app.js

    let app = new Vue({
        el : '#oddneven',
        data : {
            number : ''
        }
    })

 

결과화면 

 

공백인경우, 0인경우, 짝수인경우를 분기하여 렌더링되도록 했다. 

 

 

반복문

 

: v-for를 이용하여 배열의 각 원소들에 접근한다. 

 

app.html 

    <div id="app1">
        <input type="radio" value="짝수" v-model="oddneven">짝수만 보기
        <input type="radio" value="홀수" v-model="oddneven">홀수만 보기

        <p>{{oddneven}}만 보여용!</p>
        <ul v-if="oddneven=='짝수'">
            <li v-for="num in numbers" v-if="num%2==0" v-text="num"></li>
        </ul>
        <ul v-else>
            <li v-for="num in numbers" v-if="num%2!=0" v-text="num"> </li>
        </ul>
    </div>

 

app.js

    let app1 = new Vue({
        el: '#app1',
        data: { 
            oddneven : '짝수'
            , numbers :  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        }
    });

 

결과 화면 

data로 짝수, 홀수 여부를 나타내는 oddneven, 숫자 배열인 numbers를 넘기면, v-if에 의해 oddneven의 값을 확인하고 조건부 렌더링을 진행한다.  

 

아래처럼 메서드를 이용해 좀더 쉽고 편리하게 렌더링 할 수 있는 방법도 있다. (이후 포스팅) 

 

app.html 

    <div id="app1">
        <input type="radio" value="짝수" v-model="oddneven">짝수만 보기
        <input type="radio" value="홀수" v-model="oddneven">홀수만 보기
        <p>{{oddneven}}만 보여용!</p>

        <ul>
            <li v-for="num in filtered">
                <p v-text="num"></p>
            </li>

        </ul>
    </div>

 

app.js

 let app1 = new Vue({
            el: '#app1',
            data: {
                oddneven: '짝수',
                numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
            },
            computed: {
                filtered: function () {
                    let ooe = this.oddneven;
                    result = this.numbers.filter((value, index) => {
                        return ooe == '짝수' ? value % 2 == 0 : value % 2 != 0;
                    })
                }
            }
        });

 

 

객체 데이터 추출

 

: 원본 데이터가 객체인경우 객체를 호출하여 items.name 같은 식으로 내부 데이터를 꺼내 올 수도 있고 key-value 형식으로 된 데이터 또한 추출할 수 있다. 

 

app.html 

    <div id="app3">
        <select id="occupation">
            <option disabled="disabled" selected>직업을 선택해 주세요.</option>
            <option v-for="(val, key) in occupation" v-bind:value="key" v-text="val"></option>  
        </select>
    </div>

 

app.js 

    let occuList = {
        1 : 'Chef',
        2 : 'Architect',
        3 : 'Banker',
        4 : 'Software Engineer',
        5 : 'Chemist',
        6 : 'Finance Manager'
    }

    let app = new Vue({
        el : '#app3',
        data : {
            occupation : occuList
        }
    })

 

결과화면

v-for="(val, key) in occupation" v-bind:value="key" v-text"val"

객체를 호출하여 key,value를 가져온다. 한가지 주의할 점은 key-value순이 아니라 value, key순이며 (val, key, index)를 이용해 index를 가져올 수도 있다.