vue.js--基础 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中,键盘事件
<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>
作者:做梦的人(小姐姐) 出处:https://www.cnblogs.com/chongyou/ 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。 如果文中有什么错误,欢迎指出。以免更多的人被误导。 微信号:18582559217 |