Kane/vue-learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

提交小修改！

Browse Source
This commit is contained in:
Kane Wang 2022-05-24 22:40:45 +08:00
parent 28b0a0ba00
commit 225189854c
2 changed files with 74 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/kane.css
View File

@ -1,4 +1,3 @@
html { html {
--backupground-color: #f7f7f7; --backupground-color: #f7f7f7;
--btn-color-blue: #307dbe; --btn-color-blue: #307dbe;
@ -9,7 +8,8 @@ html {
background-color: #eee; background-color: #eee;
} }
#root { #root,
#app {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
position: fixed; position: fixed;
@ -18,7 +18,8 @@ html {
overflow: auto; overflow: auto;
} }
#root *+* { #root,
#app * + * {
margin-top: 15px; margin-top: 15px;
} }
@ -61,7 +62,7 @@ input {
} }
label { label {
display:inline-block; display: inline-block;
font-size: 2rem; font-size: 2rem;
margin-top: 15px; margin-top: 15px;
} }

69
列表过滤/列表过滤.html Normal file
View File

@ -0,0 +1,69 @@
<!--
* @Author: Kane
* @Date: 2022-05-24 21:47:36
* @LastEditors: Kane
* @LastEditTime: 2022-05-24 22:12:10
* @FilePath: \vue学习\列表过滤\列表过滤.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>&nbsp;过滤&nbsp;</legend>
<label for=""
>姓名：<input type="text" v-on:keydown.enter="filteName();"
/></label>
<label
>性别：
<select name="" id="">
<option value=""></option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</label>
</fieldset>
<ul>
<li v-for="person in personsList" 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 },
],
},
methods: {
filteName: function () {
console.log("过滤名字");
},
},
});
</script>
</html>