文章介绍了如何在Vue.js应用中，通过计算属性`computed`实现基于用户输入的姓名查询功能，以及如何使用监听属性`watch`实时更新显示结果。
使用计算属性computed方法实现查询功能
<!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">
<input type="text" placeholder="请输入需要查询的姓名" v-model="bangding">
<div class="boss" v-for="(item,index) of arr" :key="item+index">
{{item.name}}---{{item.age}}
</div>
</div>
</body>
<script src="../vue.js"></script>
<script>
Vue.config.productionTip=false
var vm=new Vue({
el:"#app",
data() {
return {
// arr:[],
parent:[
{name:"谢华明",age:18,sex:"女"},
{name:"华明",age:19,sex:"女"},
{name:"明明",age:12,sex:"女"},
],
bangding:"",
}
},
methods: {
},
computed:{
arr(){
return this.parent.filter((item)=>{
return item.name.indexOf(this.bangding) !=-1
})
}
},
watch:{
}
})
</script>
</html>
使用监听属性watch功能实现查询功能
<!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">
<input type="text" placeholder="请输入你需要查找的姓名" v-model="bangding">
<div class="boxx" v-for="(item,index) of arr" :key="index+item">
{{item.name}}---{{item.age}}---{{item.sex}}
</div>
</div>
</body>
<script src="../vue.js"></script>
<script>
Vue.config.productionTip=false
var vm=new Vue({
el:"#app",
data(){
return{
// arr:[],
obj:[
{name:"张三",age:"18",sex:"男"},
{name:"李四",age:"19",sex:"男"},
{name:"王五",age:"20",sex:"男"},
],
bangding:"",
}
},
methods: {
},
watch:{
bangding:{
immediate:true,
handler(val){
return this.arr=this.obj.filter((item)=>{
return item.name.indexOf(val) !=-1
})
}
}
}
})
</script>
</html>
1046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
