The article directories

  • Notepad function
    • 1. The new
    • 2. Delete the
    • 3. Statistical
    • 4. To empty
    • 5. Hide

Notepad function

  • Notepad has basic operation functions such as add, delete, change and check. Enter the content in the input box and press enter to add. Each content added will add a record in the lower left corner
  • When you want to delete a piece of content, place your mouse over the content and a delete arrow appears. There is a Clear button in the lower right corner, and when clicked, the entire contents of the notepad are erased



1. The new



2. Delete the



3. Statistical



4. To empty



5. Hide



<link rel="stylesheet" href="css/index.css" type="text/css">
<body>
<! -- Main area -->
<section id="todoapp">
    <! -- Input box -->
    <header class="header">
        <h1>Little black notepad</h1>
        <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="Please enter the task"
               class="new-todo" />
    </header>
    <! -- List area -->
    <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 class="destroy" @click="remove(index)"></button>
                </div>
            </li>
        </ul>
    </section>
    <! -- Statistics and emptying -->
    <footer class="footer" v-show="list.length! = 0">
      <span class="todo-count" v-if="list.length! = 0">
        <strong>{{ list.length }}</strong> items left
      </span>
        <button v-show="list.length! = 0" class="clear-completed" @click="clear">
            Clear
        </button>
    </footer>
</section>
<! -- -- -- > at the bottom of the
<footer class="info">
    <p>
        <a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a>
    </p>
</footer>
<! -- Development environment version, including helpful command line warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#todoapp".data: {
            list: ["Every day"."A"."Little trick"].inputValue: "Study hard and make progress every day."
        },
        methods: {
            add: function () {
                this.list.push(this.inputValue);
            },
            remove: function (index) {
                console.log("Delete");
                console.log(index);
                this.list.splice(index, 1);
            },
            clear: function () {
                this.list = []; }}})</script>
</body>
Copy the code