vue学习：基于本地应用制作的记事本

基于本地应用制作的记事本

功能

1.新增 2.删除 3.统计 4.清空 5.隐藏

逻辑

新增

1.生成列表结构（v-for 数组）：建立一个字符串数组用于统计用户输入内容，并且用于新增数据内容。 2.获取用户输入（v-model）：对相应的表单元素设置双向数据绑定，获取数据。 3.回车，新增数据(v-on.enter 添加数据)：就是往数组里添加内容。通过回车控制（@keyup.enter）

删除

1.点击删除指定内容（v-on splice）:通过对应的下标删除指定的内容。最终实现点击通过索引删除对应的元素

统计

1.统计信息个数：信息的个数就是数组的长度，通过v-text展示数组的长度即可

清空

1.一次性删除（v-on）：通过v-on绑定点击事件，清空数组即可。this.数组=[];

隐藏

1.底部统计数据：当没有数据就把元素隐藏起来。（v-show）(v-if)都可以选用。当数组的元素不为0，（v-if = 数组的长度 != 0）即可。

最终效果： 阿闷的记事本

整体代码如下：

<script> // 1.生成列表结构：(v-for 数组) // 2.获取用户输入(v-model) // 3.回车，新增数据(v-on.enter 添加数据) var app = new Vue({ el: "#box", data: { list: ['吃饭', '睡觉', '打豆豆'], inputValue: "起床写代码 !", }, methods: { add: function () { this.list.push(this.inputValue); }, remove: function (index) { this.list.splice(index, 1); }, clear: function () { this.list = []; } } }) </script>