Vue可爱清新记事本

一个简单有趣的小记事本

该项目已上传github，有需要可以点击链接下载源码vue简易记事本项目
有建议可以留言哦！欢迎大家指正

运行效果：

要求：输入框按下enter键时，输入框中输入的内容保存并显示在输入框下方

实现：（首先是给输入框设置事件限制，@keyup.enter设置按下enter键实现的方法）

<input type="text" v-model="message" @keyup.enter="save(message)" />

用一个数组保存记事本中的值，用length保存记事本的内容数量
通过数组的push方法添加数组元素

save: function(message) {this.length = this.arr.push(message);this.message = "";this.showArr.push(false);//保存每一条列表叉叉图片的显示状态，方便更改和调用}}

要求：记事本中的每一行有一个删除按钮，按下后删除当前这行的内容，每一行的删除按钮在鼠标悬浮时显示，鼠标离开后隐藏

实现：
列表结构通过 v-for 指令结合数据生成
给列表的每一行添加鼠标悬浮事件和鼠标离开事件，并给图片按钮设置v-show指令控制图片按钮的显示状态

<ul>
<!--鼠标悬浮事件 @mouseenter>    <!--鼠标离开事件@mouseleave-->
<li v-for="(item,index) in arr" @keyup.hover="show" @mouseenter="show(index)" @mouseleave="noShow(index)">
<font>{{index+1+"."}} &nbsp; &nbsp; {{item}}</font>
<img src="img/cha.png" @click="clear(index)" v-show="showArr[index]">
</li>
</ul>

clear方法传入删除的数组序列号index，通过数组的splice方法删除数据（第一个参数是要删除元素的序列号，第二个参数是删除个数）

show和noShow方法是修改列表中图片按钮的显示状态，通过数组的splice方法删除数据并新增数据替换掉删除的数据（第一个参数是要删除元素的序列号，第二个参数是删除个数，第三个参数是新增的数据）

clear(index) {this.length--;this.arr.splice(index, 1);},show: function(index) {this.showArr.splice(index, 1, true);},noShow: function(index) {this.showArr.splice(index, 1, false);}

要求：左下方统计记事本保存的内容数量，右下方有一个全部清空按钮clear，按下之后记事本所有内容清空

实现：

<div class="info"><span class="ls">{{length}} item left</span><span class="rs" @click="kong">clear</span>
</div>

kong方法清空记事本保存的所有内容，并设置length为0

kong: function() {this.length = 0;this.arr.splice(0, this.arr.length);}

嘤嘤嘤，这么可爱的记事本不想点赞一下吗？

Vue可爱清新记事本相关推荐

用Vue实现小黑记事本案例
用Vue实现小黑记事本案例实现内容代码介绍全部代码实现内容新增数据删除操作统计个数清空clear 隐藏在无数据时是隐藏状态代码介绍输入区域 <div id="re ...
利用vue实现简单记事本
废话不多说先上图!!!! 代码也很简单,主要利用了vue的v-if,v-for,v-on等绑定 <!DOCTYPE html> <html lang="zh-cn" ...
vue案例小黑记事本详解
大家好,今天学的东西不是很多,但遇到了一个特别有趣的vue小案例吧,我觉得可以拿出来给大家伙练练手,虽然案例简单,并不复杂,但也算是涵盖了vue大部分的常用知识点,希望大家可以多练练,有助于vue的学 ...
【Vue】小黑记事本
<html><head><meta http-equiv="content-type" content="text/html; charse ...
vue之实现记事本功能
文章目录记事本功能 1. 新增 2. 删除 3. 统计 4. 清空 5. 隐藏记事本功能记事本有基本的增删改查等操作功能,输入框输入内容回车添加,每添加一条内容左下角就会增加一条记录当想要删除 ...
前端vue入手案例--记事本
分享一个用vue做的一个案例,这个案例结合了大多的vue的入门知识,包括有点击事件,数据双向绑定,v-for获取数据列表,v-if 页面元素显示方法等等. 学习这个案例也是能很好的帮助vue的学习者掌 ...
Vue 实现小小记事本
1.实现效果用户输入后按回车,输入的内容自动保存,下方会显示记录的条数,鼠标移动到文字所在div上,会显示删除按钮,点击按钮,相应记录会被删除,下方的记录条数会相应变化,点击clear,所有记录会被 ...
Vue实现简单记事本
整体实现效果如下: 代码比较简单,在此不做过多的解释代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
D2Admin - 基于vue的清新后台模板
Solution of management system front-end based on vue.js and ElementUI 介绍 D2Admin 是一个开源的管理系统前端集成方案 Gi ...

Vue可爱清新记事本

一个简单有趣的小记事本

Vue可爱清新记事本相关推荐

最新文章

热门文章