汕头app制作,包头seo推广哪家专业,做新媒体广告的网站,广西建筑模板直接上代码
以下代码使用了两种实现方式#xff0c;监视属性和计算属性 当能用计算属性实现时#xff0c;推荐使用计算属性
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title列表过滤/titlescript type监视属性和计算属性 当能用计算属性实现时推荐使用计算属性
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title列表过滤/titlescript typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2人员列表/h2input typetext placeholder请输入名字 v-modelkeyWordulli v-for(p,index) of filPerons :keyindex{{p.name}}-{{p.age}}-{{p.sex}}/li/ul/divscript typetext/javascriptVue.config.productionTip false//用watch实现//#region /* new Vue({el:#root,data:{keyWord:,persons:[{id:001,name:马冬梅,age:19,sex:女},{id:002,name:周冬雨,age:20,sex:女},{id:003,name:周杰伦,age:21,sex:男},{id:004,name:温兆伦,age:22,sex:男}],filPerons:[]},watch:{keyWord:{immediate:true,handler(val){this.filPerons this.persons.filter((p){return p.name.indexOf(val) ! -1})}}}}) *///#endregion//用computed实现new Vue({el:#root,data:{keyWord:,persons:[{id:001,name:马冬梅,age:19,sex:女},{id:002,name:周冬雨,age:20,sex:女},{id:003,name:周杰伦,age:21,sex:男},{id:004,name:温兆伦,age:22,sex:男}]},computed:{filPerons(){return this.persons.filter((p){return p.name.indexOf(this.keyWord) ! -1})}}}) /script
/html
