【IMWeb训练营作业】Todo Liss试手制作
来源:互联网 发布:js 增加option 编辑:程序博客网 时间:2024/06/05 20:49
初期效果图
代码部分
html:
<div id="todoList"> <p class="title">添加任务:</p> <input type="text" v-model="inputData" placeholder="请输入您的任务" @keyup.enter="addList(inputData)"> <p class="title">任务列表:</p> <list-com v-for="(item,index) in listData" :child-list="item" :ind="index" :key="item" @del="delete2"></list-com></div>css:
html, body { margin: 0; padding: 0; } #todoList { display: flex; height: auto; justify-content: flex-start; flex-direction: column; padding: 30px; } .title { text-align: center; padding-top: 5px; padding-bottom: 5px; background-color: #ff0000; color: #ffffff; } input { padding: 5px; } .todoList { display: inline-flex; justify-content: space-between; align-items: center; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; border-bottom: 1px solid #aaaaaa; } .todoList:hover { border-bottom: 0px; background-color: #bbbbbb; } .todoList:hover .delete { display: block; } .inline-block { display: inline-block; } .che { position: relative; width: 12px; height: 12px; border: 1px solid #888888; border-radius: 2px; } .sq1 { position: absolute; top: 50%; left: 50%; margin-top: -35%; margin-left: -35%; width: 70%; height: 70%; } .sq2 { background-color: #ff0000; } .con { height: 20px; line-height: 20px; } .delete { display: none; width: 20px; height: 20px; line-height: 20px; text-align: center; background-color: #ff0000; color: #ffffff; }
js:
var listCom = { props: ['childList', 'ind'], template: `<div class="todoList"> <div class="inline-block"> <input type="checkbox"> <div class="inline-block con">{{childList}}</div></div> <div class="inline-block delete" title="删除" @click="delete1(ind)">x</div></div> </div>`, methods: { checkSelect: function() {}, isSq: function() { }, delete1: function(ind) { this.$emit('del', ind); } } }; var vm = new Vue({ el: '#todoList', data: { inputData: null, listData: [], listType: 0 }, methods: { addList: function(val) { this.listData.push(val); this.inputData = null; }, delete2: function(ind) { this.listData.splice(ind, 1); } }, components: { 'list-com': listCom } });
0 0
- 【IMWeb训练营作业】Todo Liss试手制作
- 【IMWeb训练营作业】Todo List制作
- 【IMWeb训练营作业】todo list项目
- 【IMWeb训练营作业】之Todo List
- IMWeb训练营 todo list作业
- 【IMWeb训练营作业】todo list
- 【IMWeb训练营作业】todo list
- 【IMWeb训练营作业】 --- todo list
- IMWeb训练营作业之todo
- 【IMWeb训练营作业】Todo-list
- 【IMWeb训练营作业】-Todo List
- 【IMWeb训练营作业】todo list
- 【IMWeb训练营作业】todo-list
- 【IMWeb训练营作业】Todo list
- IMWeb训练营作业----todo list
- 【IMWeb训练营作业】第一次Vue作业-todo list
- [IMWeb训练营作业]基于Vuejs的Todo List
- IMweb训练营作业—-Todo List(vue)
- hive中数据的几种加载方式
- 第二章 BIRT设计器概述及本地化支持
- ios NSUserDefaults读取和写入自定义对象
- 关于RadioGroup中的radiobutton选中状态保存的问题!!
- 源码分析mycat1.6之网络篇----前后端连接交互设计(mycat命令处理流程)
- 【IMWeb训练营作业】Todo Liss试手制作
- 【LeetCode】Hamming Distance
- css3 box-sizing属性
- HTTP常见状态码
- Android 动画--补间动画(Tween Animation)
- +=运算符重载
- 实时更新的天气预报页面
- 《深入理解java虚拟机》-java堆溢出笔记
- HDU2807