lovecoding
/
web0715


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
							<!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:""
            },
            computed:{
                newList(){
                    // 整体数据中过滤出符合条件的数据
                    return this.arr.filter((item)=>{
                        console.log(item,'item')
                        return item.name.indexOf(this.keywords) !== -1
                    })
                }
            }
        })
    </script>
</body>
</html>