78 lines
2.6 KiB
HTML
78 lines
2.6 KiB
HTML
<!--
|
|
* @Author: Kane
|
|
* @Date: 2022-05-24 21:47:36
|
|
* @LastEditors: Kane
|
|
* @LastEditTime: 2022-05-25 11:01:43
|
|
* @FilePath: \vue.js学习\列表过滤\列表过滤.html
|
|
* @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> 过滤 </legend>
|
|
<label for=""
|
|
>姓名：<input type="text" v-model:value="nameFilter"
|
|
/></label>
|
|
<label
|
|
>性别：
|
|
<select name="" id="">
|
|
<option value=""></option>
|
|
<option value="男">男</option>
|
|
<option value="女">女</option>
|
|
</select>
|
|
</label>
|
|
</fieldset>
|
|
<ul>
|
|
<li v-for="person in filteredPersonList" v-bind:key="person.id">
|
|
姓名：{{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 },
|
|
],
|
|
nameFilter: "",
|
|
},
|
|
methods: {
|
|
filteName: function () {
|
|
console.log("过滤名字");
|
|
},
|
|
},
|
|
computed: {
|
|
filteredPersonList() {
|
|
return this.personsList.filter((p) => {
|
|
return p.name.indexOf(this.nameFilter) != -1;
|
|
});
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
</html>
|