vue之实现记事本功能

文章目录

记事本功能

  • 记事本有基本的增删改查等操作功能，输入框输入内容回车添加，每添加一条内容左下角就会增加一条记录在这里插入图片描述
  • 当想要删除一条内容时，鼠标放到内容上，就会出现一个删除箭头。右下角有个Clear按钮，点击后，记事本的全部内容都会被清除掉

在这里插入图片描述
在这里插入图片描述

1. 新增

在这里插入图片描述
在这里插入图片描述

2. 删除

在这里插入图片描述
在这里插入图片描述

3. 统计

在这里插入图片描述
在这里插入图片描述

4. 清空

在这里插入图片描述
在这里插入图片描述

5. 隐藏

在这里插入图片描述
在这里插入图片描述

<link rel="stylesheet" href="css/index.css" type="text/css">
<body>
<!-- 主体区域 -->
<section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
        <h1>小黑记事本</h1>
        <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
               class="new-todo" />
    </header>
    <!-- 列表区域 -->
    <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>
    <!-- 统计和清空 -->
    <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>
<!-- 底部 -->
<footer class="info">
    <p>
        <a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a>
    </p>
</footer>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#todoapp",
        data: {
            list: ["每天", "一个", "小技巧"],
            inputValue: "好好学习,天天向上"
        },
        methods: {
            add: function () {
                this.list.push(this.inputValue);
            },
            remove: function (index) {
                console.log("删除");
                console.log(index);
                this.list.splice(index, 1);
            },
            clear: function () {
                this.list = [];
            }
        },
    })
</script>
</body>

在这里插入图片描述

posted @ 2021-02-17 15:29  兮动人  阅读(335)  评论(0)  编辑  收藏  举报