在赶项目,我就简单的做了下。
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
input {
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
.main {
position: relative;
width: 100%;
height: 100%;
}
.main .header {
position: relative;
width: 100%;
height: 60px;
background-color: #99A9BF;
color: #fff;
line-height: 60px;
font-size: 30px;
text-align: center;
}
.main .mbody {
position: relative;
margin: 0 auto;
width: 800px;
height: -webkit-calc(100% - 60px);
height: calc(100% - 60px);
overflow: auto;
text-align: center;
}
.mbody > input{
position: relative;
padding: 0 10px;
border: 0 none;
outline: 0 none;
box-sizing: border-box;
border: 1px solid #000;
border-radius: 10px;
width: 400px;
height: 40px;
font-size:20px;
margin: 20px auto;
}
.mbody > input:-webkit-input-placeholder {
color: #666;
}
.mbody .listbox {
position: relative;
margin: 0 auto;
width: 600px;
}
.items .item {
text-align: left;
}
.items .item span.isChecked {
text-decoration: line-through;
}
<div id="app"></div>
<script type="x-template" id="temp">
<div class="main">
<div class="header">Todo List</div>
<div class="mbody">
<input type="text" name="tocontent" @keyup.enter="addTodo" placeholder="添加任务,例如:我要看1小时书" v-model="tocontent"/>
<div class="listbox">
<span v-show="todos.length == 0">暂时没有任务</span>
<div class="items">
<div class="item" v-for="(todo, index) in todos">
<input type="checkbox" v-model="todo.isChecked"/>
<span :class="todo.isChecked ? 'isChecked': '' ">{{ todo.content}}</span>
<button @click='delTodo(index)'>删除</button>
</div>
</div>
</div>
</div>
</div>
</script>
var todolist = new Vue({
el: '#app',
template: "#temp",
methods: {
delTodo(i){
this.todos.splice(i,1)
},
addTodo(){
this.todos.push({
isChecked: false,
content: this.tocontent
})
this.tocontent = '';
}
},
data: {
tocontent: "",
todos: [
{
isChecked: false,
content: '我要早点睡觉'
},
{
isChecked: false,
content: '我要早点睡觉'
}
]
}
})