1.ウォッチによる自動フィルタリング（監視、リスニング属性）
<!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>demo</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<style>
input {
height: 30px;
width: 200px;
}
</style>
<body>
<div id="box">
查询框：<input type="text" name="" v-model="keyWord">
<ul>
<li v-for="(p,index) in mPersons" :key="index">{
{p.id}} - {
{p.name}} - {
{p.age}}岁 - {
{p.sex}}</li>
</ul>
<button @click="mClick">点击查询</button>
</div>
</body>
<script type="text/javascript">
var box = new Vue({
el: "#box",
data: {
persons: [
{ id: "001", name: "孙悟空", age: 21, sex: "男" },
{ id: "002", name: "唐三藏", age: 25, sex: "男" },
{ id: "003", name: "孙行者", age: 23, sex: "女" },
{ id: "004", name: "唐太宗", age: 33, sex: "男" },
{ id: "005", name: "张三丰", age: 22, sex: "女" },
],
mPersons: [],
keyWord: "",
mCheck: 1
},
methods: {
mClick() {
// alert(this.keyWord);
}
},
watch: {
keyWord: {
immediate: true, // 初始化时让handler调用一下
handler(val) {
this.mPersons = this.persons.filter((p) => {
return p.name.indexOf(val) !== -1;
})
}
}
}
})
</script>
</html>
<!-- this.mPersons = this.persons.filter((p) => {
return p.name.indexOf(val) !== -1 // name中包含的过滤
}) -->次に、クリックボタンフィルタリングを実現するためのメソッド（クリック）を使用します
<!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>demo</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<style>
input {
height: 30px;
width: 200px;
}
</style>
<body>
<div id="box">
查询框：<input type="text" name="" v-model="keyWord">
<ul>
<li v-for="(p,index) in mPersons" :key="index">{
{p.id}} - {
{p.name}} - {
{p.age}}岁 - {
{p.sex}}</li>
</ul>
<button @click="mClick">点击查询</button>
</div>
</body>
<script type="text/javascript">
var box = new Vue({
el: "#box",
data: {
persons: [
{ id: "001", name: "孙悟空", age: 21, sex: "男" },
{ id: "002", name: "唐三藏", age: 25, sex: "男" },
{ id: "003", name: "孙行者", age: 23, sex: "女" },
{ id: "004", name: "唐太宗", age: 33, sex: "男" },
{ id: "005", name: "张三丰", age: 22, sex: "女" },
],
mPersons: [],
keyWord: "",
mCheck: 1
},
methods: {
mClick() {
// alert(this.keyWord);
this.mPersons = this.persons.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1;
})
}
},
})
box.mPersons=box.persons; // 初始替换
</script>
</html>3.計算された（計算されたプロパティ）を介したボタンフィルタリングをクリックします
<!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>demo</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<style>
input {
height: 30px;
width: 200px;
}
</style>
<body>
<div id="box">
查询框：<input type="text" name="" v-model="keyWord">
<ul>
<li v-for="(p,index) in nPersons" :key="index">{
{p.id}} - {
{p.name}} - {
{p.age}}岁 - {
{p.sex}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
var box = new Vue({
el: "#box",
data: {
persons: [
{ id: "001", name: "孙悟空", age: 21, sex: "男" },
{ id: "002", name: "唐三藏", age: 25, sex: "男" },
{ id: "003", name: "孙行者", age: 23, sex: "女" },
{ id: "004", name: "唐太宗", age: 33, sex: "男" },
{ id: "005", name: "张三丰", age: 22, sex: "女" },
],
keyWord: "",
mCheck: 1,
},
computed:{
nPersons(){
return this.persons.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1;
})
}
}
})
</script>
</html>