vue模糊查询

vue当中第一种方案:(不推荐)

/* templeta */
<div id="app-4">

    <input type="text" @input="handleInput">
  <ul>
      <li v-for="pika in pikachu">{{pika}}</li>
  </ul>
</div>

/* script */

<script>
var app4 = new Vue({
    el: '#app-4',
    data: {
       age:18,
        baidu:"www.baidu.com",
        pikachu:[
            "aaaaa",
            "bbbbb",
            "ccccc",
            "ddddd"
        ],
        pikachu1:[
            "aaaaa",
            "bbbbb",
            "ccccc",
            "ddddd"
        ]
    },
    methods:{
        handleInput(ev){

            this.pikachu=this.pikachu1.filter(
                item=>item.includes(ev.target.value))
        }
        }


})
</script>

第二种:(推荐)

/* templeta */
<div id="app">

    <input type="text" v-model="mytext">

    <ul>
        <li v-for="pika in mymethod()">{{pika}}</li>
    </ul>
</div>
/* script */

<script>
    var app4 = new Vue({
        el: '#app',
        data: {


            pikachu:[
                "aaaaa",
                "bbbbb",
                "ccccc",
                "ddddd"
            ],
            mytext:''

        },
        methods:{
            mymethod(){

                return this.pikachu.filter(
                    item=>item.includes(this.mytext))
            }
        }


    })
</script>