一、【filter】按指定条件筛选、过滤数组与对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js操作数组大全</title>
</head>
<style>
.old {
background-color: rgb(234, 234, 234);
width: 350px;
height: auto;
border: 1px rgb(70, 70, 70) solid;
padding-left: 10px;
padding-top: 15px;
padding-bottom: 20px;
padding-right: 10px;
margin-bottom: 30px;
}
input {
height: 20px;
width: 200px;
}
.line {
width: 100%;
height: 2px;
margin-top: 20px;
margin-bottom: 20px;
background-color: rgb(187, 187, 187);
}
</style>
<script src="vue.js"></script>
<body>
<div id="arrlist">
<div>
<h5>======== 【filter】按指定条件筛选、过滤数组</h5>
<div class="old">
<div style="margin-bottom: 20px;">
<span v-for="(value,index) in mAges" :key="index"> {{value}} ,  </span>
</div>
<button @click="nClick">筛选(大于3,小于5)</button>
<div class="line"></div>
<div>
<span v-for="(value,index) in mCitys" :key="index"> {{value}} ,  </span>
</div>
<div>
<ul>
<li v-for="(value,index) in mStudents">
{{value.id}} - {{value.name}} - {{value.age}} - {{value.sex}}
</li>
</ul>
</div>
<div>
<input type="text" name="" id="" v-model:value="mText">
<button @click="mClick">开始过滤筛选</button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
// 通过Js操作数组和对象最详细实例（图文+完整源代码）
var arrlist = new Vue({
el: "#arrlist",
data: {
ages: [6, 3, 8, 1, 5, 4, 2, 7],
citys: ["2.北京", "4.邯郸", "1.石家庄", "3.西安"],
students: [
{ id: "01", name: "张飞", age: 18, sex: "男" },
{ id: "02", name: "燕飞", age: 20, sex: "女" },
{ id: "03", name: "孔明", age: 35, sex: "男" },
{ id: "04", name: "貂蝉", age: 17, sex: "女" },
{ id: "05", name: "孔融", age: 23, sex: "男" }
],
mText: "",
mCitys: "",
mStudents: "",
mAges: ""
},
methods: {
// ======== 过滤筛选数组(>=3 and <=5)
nClick() {
this.mAges = this.ages.filter(
(value, index, SuiBian) => {
return (value >= 3 && value <= 5);
}
);
},
// 过滤筛选数组和对象(包含某个字符)
mClick() {
// 一维数组筛选过滤
this.mCitys = this.citys.filter(
(value, index, SuiBian) => {
return value.indexOf(this.mText) !== -1;
}
);
// 二维数组(对象)的筛选过滤
this.mStudents = this.students.filter((p) => {
return p.name.indexOf(this.mText) !== -1;
})
}
},
})
// 初始化数据
arrlist.mAges = arrlist.ages;
arrlist.mCitys = arrlist.citys;
arrlist.mStudents = arrlist.students;
</script>
</html>二、【filter】按指定条件筛选、过滤数组与对象
持续更新中......