Vue之小目标列表实现

                                     Vue之小目标列表实现

今天来实现一个简单的小目标列表功能。

效果图:

Vue之小目标列表实现_第1张图片

功能:可以添加目标添加后自动显示在最下面,如果勾选了就说明是已完成的目标。

1.创建一个文本框用于添加目标。并绑定键盘回车事件@keyup.13='addList' 调用添加目标方法。文本框的值则绑定addText data属性。

2.实现添加目标方法。把输入的值添加到集合中,状态默认为未完成。用this.prolist.push来添加集合的子项。

3.写两个计算方法,用来计算已完成的目标和未完成的目标。直接用this.prolist.filter过滤掉相应的状态即可。

全部代码:




	
    Title




	

小目标列表

添加一个小目标

共有{{prolist.length}}个目标,已完成{{getSuccess.total}},还有{{getUnSuccess.total}}未完成

  • {{item.name}}

 

你可能感兴趣的:(vue,前端之路)