vue指令应用--记事本

最新推荐文章于 2023-08-23 15:44:10 发布

向歌啊

最新推荐文章于 2023-08-23 15:44:10 发布

阅读量261

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_46186155/article/details/119303408

版权

本文介绍了如何使用 Vue 指令创建一个记事本应用，包括功能分析和代码实现。应用功能包括：通过v-model同步候选框内容，使用@keyup.enter事件添加事项，v-for动态生成并删除事项，v-show控制清空和剩余事项计数的显示。文章提供了HTML、JS和CSS代码示例，并展示了最终效果。

摘要由CSDN通过智能技术生成

一、应用介绍

该应用实现以下功能：
1、在候选框写下要做的内容按下回车可在列表中显示。
2、点击每个事项右边的x可以删除事项。
3、点击右下角clear可以清空所有事项。
4、左下角显示剩余事项的条数。
5、当记事本中无事项时，隐藏clear和剩余事项条数。

二、功能分析

1、功能一可以使用v-model关联同步候选框内容，使用@keyup.enter绑定事件使内容在记事本中显示。
2、生成删除事项可以用v-for动态生成列表结构，里面信息可以用数组存储。
3、无事项时，隐藏功能可以使用v-show或者v-if，这里建议使用v-show。

三、代码及效果

HTML，js部分

<!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>Document</title>
    <link rel="stylesheet" href="记事本.css">
</head>

<body>
    <!-- 主体区域 -->
    <section id="todoapp">
        <!-- 输入框 -->
        <header class="header">
            <h1>todo记事本</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> -->
    </section>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({

最低0.47元/天解锁文章

向歌啊

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue指令应用--记事本

一、应用介绍该应用实现以下功能：1、在候选框写下要做的内容按下回车可在列表中显示。2、点击每个事项右边的x可以删除事项。3、点击右下角clear可以清空所有事项。4、左下角显示剩余事项的条数。5、当记事本中无事项时，隐藏clear和剩余事项条数。二、功能分析1、功能一可以使用v-model关联同步候选框内容，使用@keyup.enter绑定事件使内容在记事本中显示。2、生成删除事项可以用v-for动态生成列表结构，里面信息可以用数组存储。3、无事项时，隐藏功能可以使用v-show或者v-
复制链接

扫一扫

专栏目录