标签：vue 交互 list li height margin font todo 记事本
以下是记事本的源码
<!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">
<!-- <span v-if="list.length" class="todo-count">
<strong>{{ list.length }}</strong>
</span> -->
<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>
// 创建 Vue 实例
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>
标签：vue,
交互,
list,
li,
height,
margin,
font,
todo,
记事本
From： https://blog.csdn.net/2301_77264434/article/details/137226566