vue实现一个简单的记事本。

1、用绝对定位和z-inde堆叠顺序做外层效果。

2、用v-model绑定文本框输入的数据,按下回车键后自动添加。

3、将所有笔记做成一个数组textArr,用v-for循环显示。

4、设置显示区域宽度,超出用点点点表示。

5、回车添加数据后,动态获取div高度this.$refs.height1.offsetHeight

     因为需要等数据渲染完才能取到值,所以用this.$nextTick延迟回调。

6、动态修改两个子div高度,this.$refs.height2.style.height=xx+"px";

ps:标出的这几点都是我出过错的地方,只学到vue的几个指令,this.$refs和this.$nextTick是为了实现这个效果查资料写的,还没还没完全理解。



	
		
		小黑笔记本
		
		
	
	
		
		
  • {{index+1}}. {{message}} ×
共计{{textArr.length}}条笔记 清空

效果图

vue实现一个简单的记事本。_第1张图片

vue实现一个简单的记事本。_第2张图片

回车以后

vue实现一个简单的记事本。_第3张图片

点击×,删除

vue实现一个简单的记事本。_第4张图片

再点击清空

vue实现一个简单的记事本。_第5张图片

你可能感兴趣的:(vue)