vue.js--基础 事件结合双向数据绑定实现todolist,增加和删除功能
2023-09-11 14:14:15 时间
原理很简单,写一个input框,定义一个空的list,当在input中增加数据时,就往list中添加数据,然后在循环这个list的数据,删除数据就是调用list中的splice
<template> <div id="app"> <h1>{{ msg }}</h1> <input type="text" v-model="todo"/> <button @click="addData">增加数据</button> <hr> <br> <ul> <li v-for="(item,key) in list"> {{item}}--------<button @click="delteData(key)">删除数据</button> </li> </ul> </div> </template> <script> /* 双向数据绑定,用于表单, */ export default { name: 'app', data () { return { msg: 'hello', todo: '', list:[] } },methods:{ addData(){ //alert("111") this.list.push(this.todo); this.todo=''; },delteData(key){ this.list.splice(key,1) } } } </script> <style> h1, h2 { font-weight: normal; } .box{ width: 100px; height: 100px; background-color: #42b983 } </style>
相关文章
- vue.js--基础 v-bind绑定属性使用
- HTML Tags containing Vue.js v-if and v-for directives flash at loading
- 技术分享 | 测试平台开发-前端开发之Vue.js 框架
- 32 Vue插槽slot的默认值和具名插槽使用2
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- Vue - 超详细网站接入腾讯地图的完整流程,提供地图显示、IP 属地定位、地理位置名称、获取经纬度等超多功能示例(可一键复制并运行的功能源代码,详细的注释及常见问题汇总)Nuxt.js 也能用!
- Vue - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)详细示例源代码教程
- JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目
- Vue-修改Vue项目运行端口号(CLI2)
- vue从入门到进阶:vue-router路由功能(九)
- 02-vue基础-Vue常用特性
- vue-router 如果设置页面标题
- [js高手之路] vue系列教程 - 组件定义与使用上部(7)
- Vue.js@2.6.10更新内置错误处机制,Fundebug同步支持相应错误监控
- Vue学习第14天——vue自定义事件及详细代码演示
- 包学会之浅入浅出Vue.js:结业篇
- vue+echart 点击图表切换 类型 由 line 到bar
- Vue.js 技术揭秘学习 (3) render
- vue封装组件,类似elementUI组件库打包发布到npm上
- vue 创建监听,和销毁监听(addEventListener, removeEventListener)