vue-learning/列表过滤/列表过滤.html

78 lines
2.6 KiB
HTML
Raw Normal View History

2022-05-24 14:40:45 +00:00
<!--
* @Author: Kane
* @Date: 2022-05-24 21:47:36
* @LastEditors: Kane
2022-05-25 11:26:41 +00:00
* @LastEditTime: 2022-05-25 11:01:43
* @FilePath: \vue.js学习\列表过滤\列表过滤.html
2022-05-24 14:40:45 +00:00
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<!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>列表过滤</title>
<link rel="stylesheet" href="../css/root.css" />
<link rel="stylesheet" href="../css/normalize.css" />
<link rel="stylesheet" href="../css/kane.css" />
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<h1>学习列表过滤!</h1>
<hr />
<fieldset title="过滤">
<legend>&nbsp;过滤&nbsp;</legend>
<label for=""
2022-05-25 11:26:41 +00:00
>姓名:<input type="text" v-model:value="nameFilter"
2022-05-24 14:40:45 +00:00
/></label>
<label
>性别:
<select name="" id="">
<option value=""></option>
<option value="男"></option>
<option value="女"></option>
</select>
</label>
</fieldset>
<ul>
2022-05-25 11:26:41 +00:00
<li v-for="person in filteredPersonList" v-bind:key="person.id">
2022-05-24 14:40:45 +00:00
姓名:{{person.name}} - 性别:{{person.sex}} -
年龄:{{person.age}}
</li>
</ul>
</div>
</body>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#app",
data: {
personsList: [
{ id: "001", name: "马冬梅", sex: "女", age: 18 },
{ id: "002", name: "周冬雨", sex: "女", age: 19 },
{ id: "003", name: "周杰伦", sex: "男", age: 33 },
{ id: "004", name: "温兆伦", sex: "男", age: 52 },
],
2022-05-25 11:26:41 +00:00
nameFilter: "",
2022-05-24 14:40:45 +00:00
},
methods: {
filteName: function () {
console.log("过滤名字");
},
},
2022-05-25 11:26:41 +00:00
computed: {
filteredPersonList() {
return this.personsList.filter((p) => {
return p.name.indexOf(this.nameFilter) != -1;
});
},
},
2022-05-24 14:40:45 +00:00
});
</script>
</html>