使用Vue编写本地应用，网页记事本

你的名字 2023-01-04 14:56 199阅读 0赞

### Vue实现本地网页记事本 ###

*  Vue实现本地网页记事本
 *   *  1.实现展示功能
     *  2.实现增加功能事件功能
     *  3.删除功能
     *  4.统计功能
     *  5.清除功能
     *  6.隐藏功能
     *  7.源码
     *  8.测试

# Vue实现本地网页记事本 #

## 1.实现展示功能 ##

通过v-for指令将数组通过列表的形式展现出来

## 2.实现增加功能事件功能 ##

新增的功能主要是通过编写一个函数将输入框中的数据添加进对数组里面就行了，输入框中的数据通过v-model指令与数组的数组中的数据进行双向绑定。

add:function(){ 
                        this.list.push(this.inputValue);
                    },

## 3.删除功能 ##

编写一个函数将数组里面的数据按照指定下标删除指定元素。

sub:function(index){ 
                        this.list.splice(index,1);
                    },

## 4.统计功能 ##

通过v-text指令的简写方式，直接将数组长度的数据渲染在页面上即可。

共<strong>{ { list.length}}</strong>条记录

## 5.清除功能 ##

编写函数直接将数组赋值为空值即可

subAll:function(){ 
                        this.list=[];
                    }

## 6.隐藏功能 ##

直接使用v-show指令通过判断数组长度为不为零来使统计功能和清楚功能隐藏起来。

<span class="todo-count" v-show="list.length!=0">
                    共<strong>{ { list.length}}</strong>条记录
                </span>
                <button class="clear-completed" @click="subAll" v-show="list.length!=0">Clear</button>

## 7.源码 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>记事本</title>
    </head>
    
    <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">   //通过v-for指令将list数组数据展现为列表形式
                        <div class="view">
                            <span class="index"></span>
                            <label>{ { index+1}}{ { item}}</label>  //渲染为数据条目序数和内容
                            <button class="destroy" @click="sub(index)"></button> //按照下标删除指定元素
                        </div>
                    </li>
                </ul>
            </section>
            <footer class="footer">
                <span class="todo-count" v-show="list.length!=0">
                    共<strong>{ { list.length}}</strong>条记录 //渲染数组长度以实现统计功能
                </span>
                <button class="clear-completed" @click="subAll" v-show="list.length!=0">Clear</button> //清除所有的记录
            </footer>
        </section>
        <footer class="info"></footer>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  //cdn形式导入Vue包
        <script>
            var app = new Vue({ 
                el:"#todoapp",  //绑定id为todoapp的div
                data:{ 
                    inputValue:"欢迎使用记事本",   //输入框的内容
                    list:["第一件事","第二件事","第三件事"] //数组内容
                },
                methods:{ 
                    add:function(){ 
                        this.list.push(this.inputValue);  //增加输入框中的内容
                    },
                    sub:function(index){ 
                        this.list.splice(index,1);  //删除指定元素
                    },
                    subAll:function(){ 
                        this.list=[];  //删除所有的记录
                    }
                }
            })
        </script>
    
        <script></script>
    </body>
    
    </html>

## 8.测试 ##

箭头所指地方为删除指定记录的按钮，只是没有css样式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70]: /images/20221119/c58daf90d86a4cd98ce4ebdecfdb77b1.png