① 공부/HTML, JavaScript, Vue.js, CSS

[Vue.js] 조건문(v-if), 반복문(v-for)

2021. 12. 13. 04:13

728x90

조건에 따른 표시 : v-if

<body>
    <div id="app">
        <h2>True일때만 표시</h2>    
        <input type="checkbox" v-model="myVisible">표시 {{myVisible}}<br>
        <!-- <p v-show="myVisible">체크박스 ON</p> -->
        <p v-if="myVisible">체크박스 ON</p>
        <p v-else>체크박스 OFF</p>
    </div>
    
    <script>
        new Vue({
            el : '#app',
            data : {
                myVisible : false,
                isShow : true,
            }
        })
    </script>
</body>

- 클릭하면 버튼을 삭제하는 예제

<body>
    <div id="app">
       <h2>클릭하면 "좋아~" 버튼을 삭제하는 예제</h2>
       <button v-if="isShow" v-on:click="good">좋아~</button>
    </div>

    <script>
        new Vue({
            el : '#app',
            data : {
                myVisible : false,
                isShow : true,
            },
            methods : {
                good : function(){
                    this.isShow = false;
                }
            }
        })
    </script>
</body>

반복 표시 : v-for

- 배열 데이터를 리스트로 출력

<body>
    <div id="app">
        <!--반복 표시  : v-for-->
        <h2>배열 데이터를 리스트로 표시하는 예제</h2>
        <ul>
            <li v-for="item in myArray">{{item}}</li>
        </ul>
    </div>
    
    <script>
        new Vue({
            el : '#app',
            data : {
                myArray : ['소보루빵', '초코소라빵', '크로와상', '피자빵'],
            }
        })
    </script>
</body>

- 오브젝트 배열 데이터를 리스트로 출력

<body>
    <div id="app">
        <h2>오브젝트 배열 데이터를 리스트로 표시하는 예제</h2>
        <ul>
            <li v-for="item in objArray">{{item.name}} \{{item.price}}</li>
        </ul>
    </div>
    
    <script>
        new Vue({
            el : '#app',
            data : {
                myArray : ['소보루빵', '초코소라빵', '크로와상', '피자빵'],
                objArray : [
                    {name : '소보루빵', price : 1000},
                    {name : '초코소라빵', price : 1800},
                    {name : '크로와상', price : 1700},
                    {name : '피자빵', price : 2000}
                ]
            }
        })
    </script>
</body>

- 구구단을 출력하는 예제

<body>
    <div id="app">
        <h2>1 x 5 ~ 10 x 5를 반복 표시하는 예제</h2>
        <ul>
            <li v-for="n in 10"> {{n}} x 5 = {{n * 5}}</li>
        </ul>
    </div>
    
    <script>
        new Vue({
            el : '#app'
        })
    </script>
</body>

- 배열 데이터를 번호가 붙어 있는 리스트로 표시하는 예제

<body>
    <div id="app">
        <h2>배열 데이터를 번호가 붙어 있는 리스트로 표시하는 예제</h2>
        <ul>
            <li v-for="(item, index) in myArray">{{index}} : {{item}}</li>
        </ul>
    </div>
    
    <script>
        new Vue({
            el : '#app',
            data : {
                myVisible : false,
                isShow : true,
                myArray : ['소보루빵', '초코소라빵', '크로와상', '피자빵']
            }
        })
    </script>
</body>

- 배열 데이터를 테이블로 출력하는 예제

<body>
    <div id="app">
        <h2>배열 데이터를 테이블로 표시하는 예제</h2>
        <table border="1" width="500">
            <thead>
                <!-- 테이블 헤어 반복 -->
                <th v-for="item in header">{{ item }}</th>
            </thead>
            <tbody>
                <!-- 1행 반복 -->
                <tr v-for="line in ranking">
                    <!-- 1데이터 반복 -->
                    <td v-for="item in line">{{ item }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <script>
        new Vue({
            el : '#app',
            data : {
                header : [ "프로그램언어",2018,2013,2008,2003,1998],
                ranking: [
                    ['Java',1,2,1,1,16],
                    ['C',2,1,2,2,1],
                    ['C++',3,4,3,3,2],
                    ['Python',4,7,6,11,23],
                    ['JavaScript',7,10,8,7,20]
                ]
                
            }
        </script>
</body>

배열 데이터의 추가, 삭제

<body>
    <div id="app">
        <!--배열 데이터의 추가와 삭제-->
        <h2>맨 뒤에 데이터 추가하기</h2>
        <ul>
            <li v-for="item in myArray2">{{item}}</li>
        </ul>
        <br>
        <button v-on:click="addLast">맨 뒤에 추가</button><br>

    </div>
    
    <script>
        new Vue({
            el : '#app',
            data : {
                myArray2 : ['첫번째', '두번째', '세번째', '네번째', '다섯번째'],               
            }
            methods : {
                addLast : function(){
                    this.myArray2.push("[맨 뒤에 추가]");
                }
            }
        })
        </script>
</body>

- 버튼으로 리스트레 추가/삭제 예제 (methods 추가)

<body>
    <div id="app">
        <ul>
            <li v-for="item in myArray2">{{item}}</li>
        </ul>
        <br>
        <button v-on:click="addLast">맨 뒤에 추가</button> 
        <button v-on:click="addObj(3)">중간에 추가</button> <!--3번째와 4번째 사이에 추가-->
        <button v-on:click="changeObj(0)">첫번째 변경</button> 
        <button v-on:click="deleteObj(1)">두번째 삭제</button> 
    </div>
    
    <script>
        new Vue({
            el : '#app',
            data : {
                myArray2 : ['첫번째', '두번째', '세번째', '네번째', '다섯번째'],               
            },
            methods : {
                addLast : function(){
                    this.myArray2.push("[맨 뒤에 추가]");
                },
                addObj : function(index){
                    this.myArray2.splice(index, 0, '추가');
                },
                changeObj : function(index){
                    this.myArray2.splice(index, 1, '[변경]');
                },
                deleteObj : function(index){
                    this.myArray2.splice(index, 1);
                }
            }
        })
        </script>
</body>

- 버튼 클릭 시 정렬하는 예제

<body>
    <div id="app">
        <h2>버튼 클릭 시 Sort하는 예제</h2>
        <ul>
            <li v-for="item in myArray2"> {{ item }}</li>
        </ul>
        <button v-on:click="sortData(myArray2)">소트</button><br>
    </div>
    
    <script>
        new Vue({
            el : '#app',
            data : {
								myArray2 : ['첫번째', '두번째', '세번째', '네번째', '다섯번째']              
            },
            methods : {
                sortData: function(listdata) {
                    listdata.sort(function(a,b) {
                        return (a < b ? -1 : 1);
                    });
                }
            }
        })
        </script>
</body>

v-for와 v-if의 조합

ex)

- 배열에서 값 출력을 반복하며 조건을 만족할 때만 표시
=> <태그명 v-for="변수 in 배열" v-if="조건">조건만족 시 출력할 부분</태그명>

- 지정한 횟수만큼 반복하고 조건을 만족할 때만 표시
=> <태그명 v-for="변수 in 반복할 홧수 v-if="조건">조건만족 시 출력할 부분</태그명>

- v-for, v-if의 조합 연습

ㅇ 짝수만 표시하는 예제

<body>
    <div id="app">
        <!--v-if, v-for의 조합-->
        <h2>짝수만 표시하는 예제</h2>
        <ul>
            <li v-for="item in myArray3" v-if="item % 2 == 0"> {{ item }}</li>
        </ul>
    </div>
    
    <script>
        new Vue({
            el : '#app',
            data : {
                myArray3 : [1, 2, 3, 4, 5, 6]
            }
        })
        </script>
</body>

ㅇ 버튼 클릭 시 짝수만 표시하는 예제

<body>
    <div id="app">
        <h2>버튼 클릭 시 짝수만 표시하는 예제</h2>
        <ul>
            <li v-for="item in myArray3">{{item}}</li>
        </ul>
        <button v-on:click="evenData()">짝수만 표시</button><br>
    </div>
    
    <script>
        new Vue({
            el : '#app',
            data : {
                myArray3 : [1, 2, 3, 4, 5, 6]      
            },
            methods : {
                evenData : function(){
                    this.myArray3 = this.myArray3.filter(
                        function(value) { return value % 2 == 0; }
                    );
                }
            }
        })
        </script>
</body>

728x90

저작자표시 비영리 변경금지

티스토리툴바