列表过滤--监听属性过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表过滤</title>
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表信息(遍历数组)：</h2>
<hr>
<!-- <button @click.once="add">新增人员</button> -->
<!-- <button @click.once="searchPersons">搜索</button> -->
<input type="text" placeholder="请输入姓名" v-model="keyWord">
<!-- 遍历数组 -->
<ul>
<li v-for="p in filPersonList" :key="p.id">
{{p.id}}-{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
<hr>
</div>
</body>
</html>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
keyWord: '',
personList: [
{ id: '001', name: '乔峰', age: 28, sex: '男' },
{ id: '002', name: '虚竹', age: 25, sex: '男' },
{ id: '003', name: '段誉', age: 22, sex: '男' },
{ id: '004', name: '童姥', age: 90, sex: '女' },
{ id: '005', name: '李秋水', age: 88, sex: '女' },
],
filPersonList: [
],
},
watch: {
keyWord: {
immediate: true,
handler (val) {
this.filPersonList = this.personList.filter((p) => {
return p.name.indexOf(val) !== -1
})
}
}
}
})
</script>
列表过滤--计算属性过滤(运行效果如上)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表过滤之computed</title>
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表信息(遍历数组)：</h2>
<hr>
<!-- <button @click.once="add">新增人员</button> -->
<!-- <button @click.once="searchPersons">搜索</button> -->
<input type="text" placeholder="请输入姓名" v-model="keyWord">
<!-- 遍历数组 -->
<ul>
<li v-for="p in filPersonList" :key="p.id">
{{p.id}}-{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
<hr>
</div>
</body>
</html>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
keyWord: '',
personList: [
{ id: '001', name: '乔峰', age: 28, sex: '男' },
{ id: '002', name: '虚竹', age: 25, sex: '男' },
{ id: '003', name: '段誉', age: 22, sex: '男' },
{ id: '004', name: '童姥', age: 90, sex: '女' },
{ id: '005', name: '李秋水', age: 88, sex: '女' },
],
},
computed: {
// 简写,简写时确保不用settter
// myfullname: function () {
filPersonList () {
return this.personList.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1
})
}
},
})
</script>
标签：Vue,name,--,age,sex,过滤,id,属性 From： https://www.cnblogs.com/YYkun/p/18040626