Vue实现简易记事本功能

本文实例为大家分享了Vue实现简易记事本功能的具体代码,供大家参考,具体内容如下

预览图:

功能如下:

(1)输入任务并按下回车键,可将任务添加至任务列表(不可输入重复任务)

(2)点击删除,可删除对应任务

(3)点击清空,所有任务都会被删除

(4)左下角同步显示任务总数

完整代码如下:

<!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>

<style>

* {

margin: 0;

padding: 0;

}

#todoapp {

width: 600px;

background-color: rgba(19, 161, 114, 0.63);

font-family: sans-serif;

}

.header>h1 {

padding: 20px 0;

text-align: center;

font-size: 40px;

color: whitesmoke;

}

.newTask {

display: block;

width: 500px;

height: 50px;

line-height: 50px;

padding-left: 10px;

margin: 0 auto;

font-size: 20px;

outline: none;

border: none;

}

.todolist li {

height: 30px;

line-height: 30px;

padding-left: 15px;

margin: 10px 0;

font-size: 25px;

color: white;

}

.todolist .item {

margin-left: 15px;

}

.destroy,

.clear {

width: 50px;

height: 30px;

float: right;

color: white;

background-color: transparent;

border: none;

font-size: 20px;

}

.footer {

width: 600px;

height: 30px;

padding: 10px 0;

vertical-align: middle;

}

.footer p {

display: inline-block;

padding-left: 15px;

color: white;

font-size: 20px;

}

</style>

</head>

<body>

<section id="todoapp">

<header class="header">

<h1>记事本</h1>

<input type="text" v-model="newItem" class="newTask" placeholder="请输入任务" @keyup.enter="add">

</header>

<section>

<ul class="todolist">

<li v-for="(item, index) in list">

<div>

<span>{{ index + 1 }}</span>

<label class="item">{{ item }}</label>

<button class="destroy" @click="del(index)">删除</button>

</div>

</li>

</ul>

</section>

<footer class="footer">

<p class="count">

items: {{ list.length }}

</p>

<button class="clear" @click="clear" v-show="list.length != 0">清空</button>

</footer>

</section>

<script src="./vue.js"></script>

<script>

const app = new Vue({

el: "#todoapp",

data: {

list: [],

newItem: ""

},

methods: {

add() {

if (this.newItem == "") {

return;

}

else {

if (!this.list.includes(this.newItem)) {

this.list.push(this.newItem);

this.newItem = "";

}

else {

alert("请勿添加重复事件!");

this.newItem = "";

}

}

},

del(index) {

this.list.splice(index, 1);

},

clear() {

this.list = [];

}

}

})

</script>

</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 Vue实现简易记事本功能 的全部内容, 来源链接: utcz.com/p/240162.html

回到顶部