Harmony 记事本增添删除样式
运行结果
css代码：
.container { flex-direction: column; justify-content: flex-start; align-items: center; padding-bottom: 100px;}.title { font-size: 25px; margin-top:20px; margin-bottom: 20px; color:#000000; opacity: 0.9; font-size:28px;}.item{ width:325px; padding:10px 0; flex-direction:row; align-items:center; justify-content: space-around; border-bottom: 1px solid #eee;}.todo{ color:#000; width:180px; font-size:18px;}.switch{ font-size:12px; texton-color: green; textoff-color: red; text-padding: 5px; width:100px; heigh:24px; allow-scale: false;}.remove{ font-size:12px; margin-left: 10px; width:68px; height: 22px; color:#fff; background-color: red;}.info{ width:100%; margin-top: 10px; justify-content: center;}.info-text{ font-size:18px; color:#AD7A1B;}.info-num{ color:orangered; margin-left: 10px; margin-right: 10px;}.add-todo{ position: fixed; left: 0; bottom:0; width:100%; height:60px; flex-direction: row; justify-content: space-around; align-items:center; background-color: #ddd;}.plan-input{ width:240px; height:35px; background-color: #fff;}.plan-btn{ width:90px; height: 30px; font-size:15px;}js代码
import todoList from "../../common/date/todoList.js"export default { data: {todoList }, remove(index){console.log(index)this.todoList.splice(index,) }, switchChange(index){ this.todoList[index].status = !this.todoList[index].status }, addTodo(){ this.todoList.push({ info:'IDE工具无法监听键盘输入', status:false }) }, computed:{ todoCount(){ let num =0; this.todoList.forEach(element=>{ if(!element.status){ num++ } }); return num } }}hml代码
待办事项 {{$item.info}} 您还有 {{todoCount}} 件事情待办
js中引入的js代码
export default[ { info:'学习离散', status:true, }, { info:'学习数据结构', status:false, }, { info:'学习四级', status:true, }, { info:'学习培训任务', status:false, }, { info:'休息', status:true, }]
