Vue实现记事本
功能要求：
- 文本框中的内容和添加到记事本的内容相同，需要用到
v-model进行数据同步 - 添加记事本内容，动态添加，使用
v-for - 在文本框中输入完，键盘按下
enter，添加内容，使用了v-on绑定事件以及添加限制符
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>记事本</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./js/job.js"></script>
</head>
<body>
<div id="note">
<header>
<a href="javascript:;" v-show="false" >x</a>
<h2>记事本</h2>
<input type="text" name="输入框" v-model="message" @keydown.enter="addLi">
</header>
<div class="list">
<ul>
<li v-for="item in array">
{{item}}<a href="javascript:;" class="distory" @click="removeLi">x</a>
</li>
</ul>
</div>
<footer v-show="array.length!=0">
<span>共计{{array.length}}条记录</span>
<a href="javascript:;" @click="clearLi">清空记录</a>
</footer>
</div>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
#note {
width: 510px;
border-radius: 3%;
background-color: #C5C5C5;
margin: 100px auto;
}
#note header {
text-align: center;
font-size: 20px;
}
header input {
width: 498px;
height: 28px;
border: 1px black solid;
}
.list li {
list-style-type: none;
margin-left: 5px;
width: 500px;
border-bottom: 1px black dashed;
margin-bottom: 5px;
}
.distory{
display: none;
}
li:hover .distory{
display: block;
}
a {
text-decoration: none;
float: right;
color: black;
}
JavaScript（Vue）
window.addEventListener("load", function(){
var note = new Vue({
el:"#note",
data:{
message:"",
array:[],
},
methods:{
addLi:function(){
if (this.message!="") {
this.array.push(this.message);
this.message = "";
}
},
removeLi:function(){
this.array.pop();
},
clearLi:function(){
this.array = [];
}
}
})
})
|