Vue基础入门小demo——记事本

文章目录

前言

demo介绍

完整代码

最终效果

案例分析

---

前言

记事本（不是操作系统的那个记事本，是一个简单的网页版本记事本）是一个较全面的Vue指令集合案例，在你学习完大部分基本的v-指令后（如v-model），你可以写这个记事本案例，来熟悉和巩固v-指令的使用方法，记事本这个案例是一个功能比较齐全的小demo，是一个不错的练手案例。

---

涉及指令：

• v-on
• v-for
• v-model

demo介绍

布局包括：

• 上面是一个输入内容的输入框
• 中间是显示内容的列表
• 底部是显示内容总数的文字和清空按钮

功能包括：

• 新增计划内容
• 删除单个计划内容
• 统计计划内容的总数
• 清空全部计划内容
• 隐藏按钮

• 鼠标移入计划内容出现删除的选项，点击 × 进行删除

完整代码

    
    
    
    





    

        
        

            
Notebook
            
        
        
        

            

                

                    

                        {{index+1}}.
                        {{item}}
                    
                    ×
                
            
        
        
        

            {{list.length}} item
            Clear
        
    

最终效果

案例分析

1. 首先页面布局和样式，不是该案例的重点，样式可以自由发挥，问题不大。
2. 显示内容列表：首先定义一个数据列表，通过v-for渲染出来默认定义好的数据。
3. 新增内容：通过v-model实现input输入框和内容清单的双向数据绑定，然后在input标签通过v-on绑定一个add函数，通过push()方法操作数组的索引值来实现新增数据。这里要注意的是绑定的不是click方法，而是通过键盘回车来实现上传，用到的是keyup.enter。
4. 删除方法：跟新增内容绑定方式差不多，通过v-on绑定一个remove函数，通过splice()方法操作数据的索引值来实现删除数据，这里绑定的click方法。
5. 统计总数：获取数据列表的长度即可。
6. 清空全部内容：通过v-on绑定一个claer函数，然后让数据列表为空，即可达到清空效果。
7. 隐藏清空按钮：通过v-if来进行判断数据列表内是否还有内容，即判断数组的长度是否为0。

---

点赞收藏，防止迷路 

---