vue.js--基础 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中,键盘事件
2023-09-11 14:14:15 时间
<template> <div id="app"> <h1>{{ msg }}</h1> <input type="text" v-model="todo" @keyup="addData($event)"/> <hr> <br> <h2>未完成</h2> <ul> <li v-for="(item,key) in list" v-if="!item.status"> <input type="checkbox" v-model="item.status"> {{item.title}}--------<button @click="delteData(key)">删除数据</button> </li> </ul> <br> <h2>已完成</h2> <ul> <li v-for="(item,key) in list" v-if="item.status"> <input type="checkbox" v-model="item.status"> {{item.title}}--------<button @click="delteData(key)">数据</button> </li> </ul> <div v-if="!status"> 这不是ok</div> <div v-if="status"> 这是ok</div> </div> </template> <script> /* 双向数据绑定,用于表单, */ export default { name: 'app', data () { return { status:true, msg: 'hello', todo: '', list:[] } },methods:{ addData(e){ console.log(e.keyCode) if (e.keyCode==13){ this.list.push( {'title':this.todo, 'status':false }, ) this.todo=''; }; },delteData(key){ alert(key) this.list.splice(key,1) } } } </script> <style> h1, h2 { font-weight: normal; } .box{ width: 100px; height: 100px; background-color: #42b983 } </style>
相关文章
- vue.js--基础 事件结合双向数据绑定实现todolist,增加和删除功能
- vue.js--基础事件定义,获取数据,执行方法传值
- vue - .postcssrc.js
- vue - webpack.dev.conf.js for FriendlyErrorsPlugin
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
- JS监听不到被操作后dom的事件,js动态生成的DOM绑定事件失效,解决方案
- 【Vue】单文件的组件(.vue)代码实例
- JavaScript - 批量替换对象数组中的属性名(快速将二维数组对象中的键名进行大量替换)传入原来的属性名和要修改的属性名即可,适用于 js vue nuxt uniapp等项目,详细示例代码教程
- [转]Vue CLI 3搭建vue+vuex 最全分析
- Vue-cli / webpack 加载静态js文件的方法
- (30)打鸡儿教你Vue.js
- (6)打鸡儿教你Vue.js
- 分享几个简单的技巧让你的 vue.js 代码更优雅
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
- vue学习笔记六:Jquery VS Vue之网络请求明细对照
- vue学习笔记五:Jquery VS Vue之事件监听明细对照
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- 【HarmonyOS】【JS】【布局】鸿蒙js开发input 输入框弹出输入法时上方布局被挤扁?
- Element-UI+Vue.js
- Django+Vue项目学习第六篇:vue+django发送post请求,设置不同content-type,前后端如何处理参数
- js-原生Js汉语拼音首字母匹配城市名
- js-原生Js汉语拼音首字母匹配城市名
- 剖析 Vue.js 内部运行机制 (1)
- Vue.js 样式绑定