Vue imitates fuzzy query

This is my own learning code, written by referring to the video of teacher kerwin of Qianfeng Education, the video resource link is at the end of the article

Code running effect

First introduce the vue address

   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script>

Using v-model and key

    <div id = "box">
       <input type = "text"  v-model="mytext"/>
       <ul>
        <li v-for ="data in test()" :key="data">
            {
   
   {data}}
        </li>
       </ul>
       <!-- {
   
   { test() }} -->
    </div>

Import visible data

       data:{
              mytext:"",
              datalist:["aaa","add","bbb","bbc","ccc","ddd","eee","ade"]
        },

full code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script>
</head>
<body>
    <div id = "box">
       <input type = "text"  v-model="mytext"/>
       <ul>
        <li v-for ="data in test()" :key="data">
            {
   
   {data}}
        </li>
       </ul>
       <!-- {
   
   { test() }} -->
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                mytext:"",
                datalist:["aaa","add","bbb","bbc","ccc","ddd","eee","ade"]
        },
        methods:{
            test(){
                return this.datalist.filter(item=>item.includes(this.mytext))
            }
        }
    })
    </script>
</body>
</html>

This is the learning imitation code, refer to the video written by Mr. Qianfeng kerwin, the link is: [Qianfeng web front-end development project tutorial_1000 episodes from zero basic introduction HTML5+CSS3+JS to proficiency (data includes front-end learning roadmap)-beep Bilibili] https://b23.tv/dJqyfv1

Vue imitates fuzzy query

Guess you like