标签：12 name 渲染 age 列表 persons sex id
<html>
<head>
<title>列表过滤</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
列表过滤两种实现方式：
1、watch监听实现；
2、computed计算属性实现
-->
<div id="root">
<!-- 1、遍历数组 -->
<h2>人员列表</h2>
<ul>
<input type="text" placeholder="请输入名字检索" v-model="keyWorld">
<!-- <li v-for="p in persons" :key="p.id"> -->
<li v-for="(p,index) in filPersons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
// 1、用watch实现
// const v =new Vue({
// el:'#root',
// data:{
// keyWorld:'',
// persons:[
// {id:'001',name:'马冬梅',age:'12',sex:'女'},
// {id:'002',name:'东二哥',age:'24',sex:'男'},
// {id:'003',name:'二傻子',age:'33',sex:'女'},
// {id:'003',name:'樱子',age:'33',sex:'男'}
// ],
// filPersons:[]
// },
// methods: {
// add(){
// const p = {id:'004',name:'老刘',age:50}
// this.persons.unshift(p) //添加老刘到第一行
// }
// },
// watch:{
// keyWorld:{
// immediate:true,
// handler(Val){
// console.log('KeyWorld被修改 '+Val)
// this.filPersons = this.persons.filter((p)=>{
// return p.name.indexOf(Val) != -1
// })
// }
// }
// }
// })
// 2、用computed实现
const vm = new Vue({
el:'#root',
data:{
keyWorld:'',
persons:[
{id:'001',name:'马冬梅',age:'12',sex:'女'},
{id:'002',name:'东二哥',age:'24',sex:'男'},
{id:'003',name:'二傻子',age:'33',sex:'女'},
{id:'003',name:'樱子',age:'33',sex:'男'}
],
},
computed:{
filPersons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWorld) != -1
}
)
}
}
})
</script>
</body>
</html>
标签：12,
name,
渲染,
age,
列表,
persons,
sex,
id
From： https://www.cnblogs.com/quliangshyang/p/17023053.html