Vue implements simple notepad function

This article example shares the specific code of Vue to implement the simple notepad function for your reference. The specific content is as follows

Preview image:

The functions are as follows:

(1) Enter the task and press Enter to add it to the task list (duplicate tasks cannot be entered)

(2) Click Delete to delete the corresponding task.

(3) Click Clear and all tasks will be deleted.

(4) The total number of tasks is displayed synchronously in the lower left corner

The complete code is as follows:

<!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>Notepad</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>Notepad</h1>
            <input type="text" v-model="newItem" class="newTask" placeholder="Please enter the task" @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)">Delete</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">Clear</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("Do not add duplicate events!");
                            this.newItem = "";
                        }
                    }
                },
                del(index) {
                    this.list.splice(index, 1);
                },
                clear() {
                    this.list = [];
                }
            }
        })
    </script>
</body>
 
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Detailed exploration of vuex 2.0 and building a notepad application using vuejs 2.0 + vuex 2.0
Local notepad example based on vue2.0+vuex+localStorage
Vue implementation of notepad case
Vue implements simple notepad
Vue implements small notepad function
Detailed explanation of vue simple notepad development
Detailed explanation of Vue Notepad example
Vue implements notepad function
vue-cli+webpack notepad project creation
Vuex implements notepad function

<<: Low-version Druid connection pool + MySQL driver 8.0 causes thread blocking and performance limitation

>>: There are text and pictures in the a tag. How to hide the text and only show the picture?