<!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="../../static/vue.js"></script>
</head>
<body>
<div id="app" align="center">
<h2>筛选</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<div><span>Name</span> <span>Age</span> <span>Gender</span></div>
<div>
<span v-for="(p,index) of filPerons" :key="index">
{
{p.name}} {
{p.age}} {
{p.sex}}<br>
</span>
</div>
</div>
<script type="text/javascript">
//用computed实现
new Vue({
el:'#app',
data:{
keyWord:'',
persons:[
{name:'蔡徐坤',age:19,sex:'女'},
{name:'陈立农',age:20,sex:'女'},
{name:'张三',age:21,sex:'男'},
{name:'李四',age:22,sex:'男'}
]
},
computed:{
filPerons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
}
}
})
</script>
</body>
</html>
Cuando entramos en Kun, se muestra el contenido correspondiente
Espero poder ayudarlos