Vue實現簡易記事本

更新時間：2022年04月11日 10:59:51 作者：webWangGe

這篇文章主要為大家詳細介紹了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="https://cdn.bootcss.com/vue/2.4.2/vue.min.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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: