마카로닉스

1771 No

Vue.js 심플 검색필터

2021-11-09 02:03:12 By 라이트 0 197 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue.js sample</title>
        <link rel="stylesheet" href="style.css" >
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    </head>
     
    <body>
        <h2>문자를 입력하면 그 문자를 표함한 항목만 표시하는 예제 </h2>
        <div id="app">
            <input v-model="findWord">
            <ul>
                <li v-for="item in findItems">{{item}}</li>
            </ul>
        </div>
 
        <script>
            new Vue({
                el: "#app",
                data: {
                    findWord:'',
                    items:['명량','극한직업','신과함께','국제시장','어벤져스','베테랑','아바타','도둑둘']
                },
                computed: {
                    // this.findWord 가 변하면 그 문자가 포함된 리스트를 계산한다.
                    findItems: function() {
                        if (this.findWord) {
                            return this.items.filter(function(value) {
                                return (value.indexOf(this.findWord) > -1);
                            }, this);
                        } else {
                            // this.findWord 가 공백일땐 리스트를 그대로 반환한다.
                            return this.items;
                        }
                    }
                }
            })
        </script>
    </body>
</html>