Web前端vueDemo—实现记事本功能（三）

系列文章目录

文章目录

系列文章目录
前言
一、项目布局
二、添加功能
三、删除功能
四、统计和清空功能
五、隐藏功能
六、项目源码
七、结果展示

前言

vue的相关配置在系列文章的第一部分中进行了配置。
此处主要使用的标签为：

v-model： 使用inputValue作为绑定的数据，在add中使用到了该字段，添加进list数组中。
v-on： 添加的点击事件。使用到三个方法，add、remove、clear。
v-show： 用于对footer中信息的隐藏，该语句也可以写在footer这个父标签上，但是隐藏后会影响整体的布局。

一、项目布局

在配置好vue的环境之后，只用创建html即可。此处为空项目。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Computible" content="ie=edge">
    <title>记事本demo</title>
</head>
<body>
    <!-- 主体区域 -->
    <section id="todoapp">
        <!-- 输入区域 -->
        <header class="header">
            <h1>记事本</h1>
            <!-- autofocus 光标定位 -->
            <input autofocus="autofocus" autocomplete="off" placeholder="请输入任务">
        </header>
        <!-- 列表区域 -->
        <section>
            <ul>
                <li>
                    <div>
                        <span>1</span>
                        <label>写代码</label>
                        <button>X</button>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 统计和清空 -->
        <footer >
            <span> 1 </span>
            <button>Clear</button>
        </footer>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>
    <script>
       
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

二、添加功能

主要在以下两部分添加代码：
1 输入区域中： 添加add方法。
2 script中： 添加对应的add方法，使用put放入inputvalue元素。

<!-- 输入区域 -->
        <header class="header">
            <h1>记事本</h1>
            <!-- autofocus 光标定位 -->
            <input v-model="inputValue" v-on:keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务">
        </header>
<script>
        var app = new Vue({
            el:"#todoapp",
            data:{
                list:["写代码","吃饭","睡觉"],
                inputValue:"好好学习，天天向上"
            },
            methods: {
                //增加方法
                add:function(){
                    this.list.push(this.inputValue);
	            }
	        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三、删除功能

主要在以下两部分添加代码：
1 列表区域中： 对list进行遍历，之后在button中绑定remove方法。
2 script中： 添加对应的remove方法，使用index删除对应元素的索引值。

<!-- 列表区域 -->
        <section>
            <ul>
                <li v-for="(item,index) in list">
                    <div>
                        <span>{{index+1}}</span>
                        <label>{{item}}</label>
                        <button v-on:click="remove(index)">X</button>
                    </div>
                </li>
            </ul>
        </section>
<script>
        var app = new Vue({
            el:"#todoapp",
            data:{
                list:["写代码","吃饭","睡觉"],
                inputValue:"好好学习，天天向上"
            },
            methods: {
                //删除方法
                remove:function(index){
                    this.list.splice(index,1);
                }   
            }
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

四、统计和清空功能

统计只用显示list的长度即可。
清空功能分为以下两步：
1 统计和清空区域中： 对button 进行方法绑定。
2 script中： 添加对应的clear方法，直接将list的数组设为[]即可。

<!-- 统计和清空 -->
        <footer >
            <span>  {{list.length}}   </span>
            <button v-on:click="clear">Clear</button>
        </footer>
        <script>
        var app = new Vue({
            el:"#todoapp",
            data:{
                list:["写代码","吃饭","睡觉"],
                inputValue:"好好学习，天天向上"
            },
            methods: {               
                //清除数据
                clear:function(){
                    this.list = [];
                }     
            }
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

五、隐藏功能

在统计和清空中加入判断条件：list.length>0。

<!-- 统计和清空 -->
        <footer >
            <span v-show="list.length>0">  {{list.length}}   </span>
            <button v-if="list.length>0" v-on:click="clear">Clear</button>
        </footer>
1
2
3
4
5

六、项目源码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Computible" content="ie=edge">
    <title>记事本demo</title>
</head>
<body>
    <!-- 主体区域 -->
    <section id="todoapp">
        <!-- 输入区域 -->
        <header class="header">
            <h1>记事本</h1>
            <!-- autofocus 光标定位 -->
            <input v-model="inputValue" v-on:keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务">
        </header>
        <!-- 列表区域 -->
        <section>
            <ul>
                <li v-for="(item,index) in list">
                    <div>
                        <span>{{index+1}}</span>
                        <label>{{item}}</label>
                        <button v-on:click="remove(index)">X</button>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 统计和清空 -->
        <footer >
            <span v-show="list.length>0">  {{list.length}}   </span>
            <button v-if="list.length>0" v-on:click="clear">Clear</button>
        </footer>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/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){
                    this.list.splice(index,1);
                },
                //清除数据
                clear:function(){
                    this.list = [];
                }     
            }
        })
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

七、结果展示

在这里插入图片描述

相关阅读:
20230830比赛总结
 虚拟摄像头之三: 重构android8.1 的 v4l2_camera_HAL 支持虚拟摄像头
 基于Java毕业设计新型农村消费贷电商平台源码+系统+mysql+lw文档+部署软件
 基于Vue+ELement搭建动态树与数据表格实现分页
 基于轻量级CNN的12306验证码识别分析系统
 编译xcb
基于Spark封装的二次开发工程edata-base，介绍
 2022杭电多校第四场题解
 拉格朗日插值法+python实现
 Go 语言是如何实现切片扩容的?【slice】
原文地址：https://blog.csdn.net/weixin_45118229/article/details/125893156