Vue之小目标列表实现

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

效果图：

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

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

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

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

全部代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style type="text/css"></style>
<script src="vue.min.js"></script>
<body><div id="test"><h1>小目标列表</h1><h2>添加一个小目标</h2><input type="text" name="" placeholder="添加小目标" v-model="addText" @keyup.13='addList'/><h3>共有{{prolist.length}}个目标，已完成{{getSuccess.total}},还有{{getUnSuccess.total}}未完成</h3><ul><li v-for="item in prolist"><input type="checkbox" v-bind:checked="item.status" @click="item.status=!item.status"/><span>{{item.name}}</span></li></ul></div>
</body>
<script >new Vue({el : "#test",data: {addText:'',//name-名称,status-完成状态prolist:[{name:"HTML5",status:false},{name:"css3",status:false},],//success:[],},methods:{addList :function(){this.prolist.push({name:this.addText,status:false});//添加后，清空addTextthis.addText="";}},computed :{getSuccess:function(){var succ = this.prolist.filter(function (val) { return val.status})return {total:succ.length}},getUnSuccess:function(){var succ = this.prolist.filter(function (val) { return !val.status})return {total:succ.length}}}})
</script>
</html>

Vue之小目标列表实现相关推荐

八一、 mpvue-使用介绍（美团团队开发的语法类似 vue的小程序的前端框架）
1. mpvue-介绍 mpvue 是美团团队开发的语法类似 Vue.js 的小程序的前端框架官网开发文档 1.1. 主要特性主要有以下特性彻底的组件化开发能力:提高代码复用性完整的 Vue ...
先定个小目标, 使用C# 开发的千万级应用
话说昨天的港股发生了一件大事,腾讯成为亚洲市值最高的公司,在这历史性的一刻,作为在鹅厂工作的C# 程序员,也应该让世人了解下C# 并不是那么没有市场.在鹅厂,代码构成中60%以上是C++, C#也有1 ...
recycleviewitem 列表加载动画_用vue实现一个虚拟列表
上次分享了超长列表分片加载的方式,这种方式现在一般不会使用,因为dom会变的无比庞大,页面会很卡,今天分享用vue实现一个虚拟列表的简易实现,本来是想用原生实现一个,后来觉得直接使用computed, ...
vue和小程序哪个好学一点_litemall,Spring Boot后端，微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端注意: 由于第一次加载数据量较大,建议wif ...
一些Vue开发小技巧，让你开发更便捷
Vue是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用.Vue的核心库只关注视图层,方便与第三方库或既有项目整合. 下面我们来看一些v ...
Vue.js 2.5 发布，而这个会玩的团队已经自研出用 Vue 开发小程序的框架了
在尤大微博铺垫着"将会引入一些关于 TypeScript 的改进"一周之后,代号为 Level E 的 Vue.js 2.5 带着日漫风来到了我们眼前.从 Release Note ...
Springboot+vue spring286小巨人图书销售购物商城#毕业设计
开发环境项目编号:Springboot+vue spring286小巨人图书销售购物商城#毕业设计开发语言:Java 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 应用服务:To ...
mpvue——基于vue的小程序开发框架
mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力. 1.全局安装cli npm ins ...
我们是如何改进YOLOv3进行红外小目标检测的？
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达 [导语]本文将介绍BBuf.小武和笔者一起在过年期间完成的一个目标检测项目,将描述我们模型改进的思路. ...

Vue之小目标列表实现

Vue之小目标列表实现

Vue之小目标列表实现相关推荐

最新文章

热门文章