vue 实现todolist,包含添加,删除,统计,清空,隐藏功能
vue 实现todolist,包含添加,删除,统计,清空,隐藏功能
添加:生成列表结构(v-for+数组)、获取用户输入(v-model)、通过回车新增数据(v-on+.enter)
删除:点击删除指定内容(v-on+splice索引)
统计:统计信息个数(v-text+length)
清空:点击删除所有信息(v-on)
隐藏:没有数据时,隐藏元素(v-show/v-if+数组非空)
<template>
<div id="app">
<div id="todolist">
<input type="text" v-model="inputVal" @keyup.enter="add" />
<ul>
<li v-for="(value,index) in list">
<div>
<span>{{index+1}}</span>
<label>{{value}}</label>
<button @click="del(index)">删除</button>
</div>
</li>
</ul>
<!-- 隐藏 -->
<footer v-show="list.length!=0">
<span>
<!-- 统计 -->
<em>{{list.length}}</em>
list
</span>
<!-- 清空 -->
<button @click="clear" >clear</button>
</footer>
</div>
</div>
</template> <script>
export default {
name: "App",
data: () => {
return {
list: ["aaa", "bbb", "ccc"],
inputVal: ""
};
},
methods: {
// 添加
add: function() {
this.list.push(this.inputVal);
},
// 删除
del:function(index){
this.list.splice(index,1)
},
// 清空
clear:function(){
this.list=[]
}
}
};
</script> <style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} ul,
li {
list-style: none;
}
</style>
vue 实现todolist,包含添加,删除,统计,清空,隐藏功能的更多相关文章
- Vue 实现todolist的添加删除功能
直接上代码 vm.$emit( eventName, [-args] ) 触发当前实例上的事件 可选附加参数 传给监听器回调. <style> #app{ margin: 100px; } ...
- vue单页应用添加百度统计
前言 申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到 ...
- 【前端vue开发】vue单页应用添加百度统计
前言 申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到 ...
- vue 样式渲染,添加删除元素
<template> <div> <ul> <li v-for="(item,index) in cartoon" :key=" ...
- C#用扩展方法进行自动生成添加删除对象转换的功能
public static class ExtendedModel { #region 实体类的增删改查 #region 添加 public static string AddStr(this obj ...
- vue的表单编辑删除,保存取消功能
过年回来第一篇博客,可能说的不是很清楚,而且心情可能也不是特别的high,虽然今天是元宵,我还在办公室11.30在加班,但就是想把写过的代码记下来,怕以后可能真的忘了.(心将塞未塞,欲塞未满) VUE ...
- Angular实现动态添加删除表单输入框功能
<div class="form-group form-group-sm" *ngFor="let i of login"> <label c ...
- Angular-表单动态添加删除
angular本身不允许去操作DOM,在angular的角度来说,所有操作都以数据为核心,剩下的事情由angular来完成.所以说,想清楚问题的根源,解决起来也不是那么困难. 前提 那么,要做的这个添 ...
- DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录
添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...
随机推荐
- 【资源分享】Gmod自瞄自动开枪脚本
*----------------------------------------------[下载区]----------------------------------------------* ...
- mybatis一级缓存和二级缓存(三)
缓存详细介绍,结果集展示 https://blog.csdn.net/u013036274/article/details/55815104 配置信息 http://www.pianshen.co ...
- Oracle 数据库,远程访问 ora-12541:TNS:无监听程序
1.修改网络连接IPV4设置为固定IP IP地址:192.168.100.8子网掩码:255.255.255.0默认网关:192.168.100.1首选DNS:192.168.100.1 2.修改.. ...
- jave的安装
1.此电脑-属性-高级系统设置-环境变量2.点下面那个 新建- JAVA_HOME3. 双击PATH变量,新建一个参数 4.新建CLASSPATH环境变量
- vue学习指南:第十四篇(详细) - Vue的 路由 第四篇 ( 路由的导航守卫 )
导航守卫 一.全局导航守卫 1. 全局导航守卫,把方法给 router,只要路由发生改变跳转都会触发这个函数 2. 每个路由 都有一个 meta 3. 全局导航守卫分两种: 1. 全局前置导航守卫:路 ...
- 解决 IDEA 无法提示导入 java.util.Date 的问题
之前有一段时间在使用IDEA的时候,发现通过快捷键Alt + Enter导入并没有提示有java.util.Date的包,仅仅只有java.sql.Date的包.于是每次使用都需要通过手写import ...
- DOM盒模型和位置 client offset scroll 和滚动的关系
DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...
- 阿里云ECS服务器CentOS7配置vsftps及其问题解决
前言 之前只在虚拟机中配过FTP服务器,今天买了云服务器,发现安装vsftpd后就是连不上,通过搜索了很多资料,最后找到了解决办法,系统是CentOS7,服务器类型是ECS 阿里云安全组配置 首先进入 ...
- python面试的100题(5)
5.现有字典 d= {'a':24,'g':52,'i':12,'k':33}请按value值进行排序? sorted(d.items(),key=lambda x:x[1]) sorted函数 对由 ...
- JavaScript——BOM和DOM
什么是BOM bom:浏览器对象模型 什么是DOM dom:文档对象模型 BOM操作: 调用windows浏览器窗口 windows对象可以通过点调用子对象 windows.navigator对象,可 ...