【vue】利用輸入框搜索過濾來選擇列表

方法1

<div id="app">
        <input type="text" @input="handleInput()" v-model="mytext" />
        <ul>
            <div v-if="isInput">
                <li v-for="data in newarr">
                    {{ data }}
                </li>
            </div>
            <div v-else>
                <li v-for="data in arr">
                    {{ data }}
                </li>
            </div>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                mytext: [],
                newarr: [],
                isInput: false,
                arr:["aaa","bbb","ccc","abb","aab"]
            },
            methods:{
                handleInput(){
                    this.newarr=this.arr.filter(item=>{ return item.indexOf(this.mytext)>-1 })
                    if(this.mytext.length==0)
                        this.isInput=false
                    else
                        this.isInput=true
                }
            }
        })
    </script>

方法2

<hr>
    <div id="app5">
        <input type="text" v-model="mytext">
        <div v-for="data in getProvince">
            <li>{{ data }}</li>
        </div>
    </div>
    <script>
        var app5 = new Vue({
            el:'#app5',
            data:{
                provinces: ["北京","上海","廣東","山東","廣西","湖南","湖北","安徽","江蘇"],
                mytext: []
            },
            computed: {
                getProvince(){
                    newarr=this.provinces.filter(item=>{ return item.indexOf(this.mytext)>-1 })
                    return newarr
                }
            }
        })
    </script>