vue.js--基础 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中,键盘事件
2018-08-20 14:45
1256 查看
<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.js双向数据绑定实现原理
- vue.js--基础 数据的双向绑定
- vue.js基础-处理用户输入与双向数据绑定
- vue.js双向数据绑定原理解析及模拟demo的实现
- Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
- vue.js使用v-model指令实现的数据双向绑定功能示例
- vue中的双向数据绑定的实现(数据劫持,结合发布者---订阅者模式)
- Vue.js实现双向数据绑定(表单自动赋值、表单自动取值)
- Vue 框架-03-键盘事件、健值修饰符、双向数据绑定
- vue.js利用defineProperty实现数据的双向绑定
- Vue.js的组件(四)父组件与子组件的数据联系 之 双向绑定
- vue.js v-model数据双向绑定实例
- Vue.js双向绑定实现原理详解
- JS实现数据双向绑定
- 原生js实现双向数据绑定
- Vue.js学习 Item4 -- 数据双向绑定
- vue实现数据双向绑定的原理
- Vue.js之视图和数据的双向绑定(v-model)