lovecoding
/
web0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>关键字搜索：<input type="text" v-model="keywords"></h2>
        <ul>
            <li v-for="(item,index) in newList" :key="index">
                {{index+1}}-我叫{{item.name}}--今年{{item.age}}--是一个{{item.sex}}孩
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:[
                    {
                        name:"LiLi",
                        age:10,
                        sex:"女"
                    },
                    {
                        name:"John",
                        age:17,
                        sex:"男"
                    },
                    {
                        name:"Lucy",
                        age:22,
                        sex:"女"
                    },
                    {
                        name:"Jack",
                        age:20,
                        sex:"男"
                    },
                    {
                        name:"孙悟空",
                        age:33,
                        sex:"男"
                    },
                    {
                        name:"猪八戒",
                        age:30,
                        sex:"男"
                    }
                ],
                keywords:"",
                newList:[]
            },
            watch:{
                keywords:{
                    immediate: true,
                    deep: true,
                    handler(value) {
                        console.log(value,'value')
                        this.newList = this.arr.filter(item => {
                            return item.sex.indexOf(value) !== -1;
                        })
                    }
                }
            }
        })
    </script>
</body>
</html>