以下是记事本的源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>记事本</title>
<style>
h1{
margin-top: 130px;
color: red;
font-size: 29px;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
}
body {
line-height: 1.4em;
background: #f5f5f5;
color: #4d4d4d;
min-width: 260px;
max-width: 600px;
margin: 0 auto;
font-weight: 300;
}
.new-todo{
position: relative;
margin: 0;
width: 100%;
font-size: 24px;
}
.todo-list li {
position: relative;
font-size: 24px;
height: 60px;
box-sizing: border-box;
border-bottom: 1px solid #e6e6e6;
}
.todo-list li {
word-break: break-all;
padding: 15px 15px 15px 60px;
display: block;
line-height: 1.2;
transition: color 0.4s;
}
.todo-list li .destroy {
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 10px;
height: 10px;
font-size: 30px;
color: black;
margin-bottom: 11px;
}
.todo-list li .destroy:after {
content: 'x';
}
.todo-list li:hover .destroy {
display: block;
}
.clear-completed {
float: right;
position: relative;
line-height: 20px;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<section id="todoapp" boder="1">
<header class="header">
<h1>小黑记事本</h1>
<input v-model="inputValue" v-on:keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
class="new-todo" />
</header>
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item, index) in list">
<div class="view">
<span class="index">{{ index + 1 }}.</span>
<label>{{ item }}</label>
<button @click="remove(index)" class="destroy"></button>
</div>
</li>
</ul>
</section>
<footer class="footer">
<button v-show="list.length" v-on:click="clear" class="clear-completed">
全删
</button>
</footer>
</section>
</body>
<script src="D:\technology\Technology\vue.js\vue.js"></script>
<script>
let vm = new Vue({
el:"#todoapp",
data:{
list: ["俯卧撑", "跑步", "游泳"],
},
methods:{
add:function(){
let data = this.inputValue.trim()
if (data != "")
this.list.push(this.inputValue);
else
console.log("null");
},
remove: function (index)
{
console.log("remove", index);
this.list.splice(index, 1);
},
clear: function ()
{
this.list = [];
}
}
})
</script>
</html>