某视频剪辑软件学习-列表过滤
！DOCTYPE html
超文本标记语言
头
meta charset=’UTF-8′ /
标题列表过滤/title
脚本类型=’text/javascript’ src=’./js/vue。js /脚本
/head
身体
！-准备好一个容器-
差异
氘人员列表/h2
输入类型=’文本’占位符=’请输入名字v-model=’keyWord ‘
保险商实验所
filPerons’ :key=’index ‘的li v-for='(p，index)
{{p.name}}-{{p.age}}-{{p.sex}}
/li
/ul
/div
脚本类型=”文本/javascript ”
Vue.config.productionTip=false
//用看实现
//#地区
/*新Vue({ 0
el:’#root ‘，
数据：{
关键字： ‘ ‘,
人员：[
{id:’001 ‘，名称： ‘马冬梅，年龄：19,性别： ‘女’},
{id:’002 ‘，名称： ‘周冬雨，年龄：20,性别： ‘女’},
{id:’003 ‘，名称： ‘周杰伦，年龄：21,性别： ‘男’},
{id:’004 ‘，名称： ‘温兆伦，年龄：22,性别： ‘男’}
],
filperon s 3360[]
},
watch:{
keyWord:{
即刻：现实，
处理程序(val){ 0
这个。菲尔庇隆=这个。人。过滤器((p)=}
返回p.name.indexOf(val)！==-1
})
}
}
}
}) */
//#endregion
//用计算实现
新Vue({ 0
el:’#root ‘，
数据：{
关键字： ‘ ‘,
人员：[
{id:’001 ‘，名称： ‘马冬梅，年龄：19,性别： ‘女’},
{id:’002 ‘，名称： ‘周冬雨，年龄：20,性别： ‘女’},
{id:’003 ‘，名称： ‘周杰伦，年龄：21,性别： ‘男’},
{id:’004 ‘，名称： ‘温兆伦，年龄：22,性别： ‘男’}
]
},
computed:{
filPerons(){ 0
返回这个。人。过滤器((p)={ 0
返回p.name.indexOf(this.keyWord)！==-1
})
}
}
})
/script
/html
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/89918.html