Detailed explanation of vue simple notepad development

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

CSS Code

#todoapp {
   margin: 0 400px;
   width: 600px;
   background-color: gray;
   text-align: center;
}
.content {
   margin:0px 100px;
}
.todo {
  margin: 10px;
  text-align: left;
  background-color:green;
}
.btn {
   float: right;
   background-color: lawngreen;
}
.clear{
   background-color: lightseagreen;
}
.list{
   margin-left: 10px;
}

HTML code plus JS code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" >
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="todoapp">
       <div class="header">
        <h1>Little Black Notepad</h1>
        <input type="text" v-model="inputValue" placeholder="Please enter the task"> <button @click="add">Add</button>
       </div>
       <div class="content">
        <ul class="todolist" v-for="(item,index) in list">
            <div class="todo">
                <span class="index">{{index+1}}</span><label class="list">{{item}}</label><button class="btn" @click="remove(index)">Delete</button>
            </div>
       
        </ul>
       </div>
       <div>
           <button @click="clearBoth" class="clear">Clear All</button>
       </div>
    </div>
    <script>
        var app = new Vue({
            el:"#todoapp",
            data: {
               list:["eat","play games","eat watermelon"],
               inputValue:""
            },
            methods: {
                remove:function(index){
                  this.list.splice(index,1)
                },
                add: function () {
                    this.list.push(this.inputValue)
                },
                clearBoth:function(){
                  this.list.splice(0,this.list.length)
                }
                
            }
        })
    </script>
</body>
</html>

Screenshot of running effect

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 simple notepad function
Vue implements small notepad function
Detailed explanation of Vue Notepad example
Vue implements notepad function
vue-cli+webpack notepad project creation
Vuex implements notepad function

<<: MySQL database 8 - detailed explanation of the application of functions in the database

>>: Install zip and unzip command functions under Linux and CentOS (server)