vue之实现记事本功能

举报
兮动人 发表于 2021/10/15 14:30:25 2021/10/15
【摘要】 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>

在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。