todolist(day_03)
程序员文章站
2024-02-10 11:18:34
...
总结:增加对时间下拉框、input输入框的空值判断,
展望:添加list的overflow-x的判断,添加横向的滚动条,学习数据库的调用。
1.main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import header from './components/header'
Vue.config.productionTip = false
Vue.component('app-header',header)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
2.APP.vue
<template>
<div id="app">
<app-header></app-header>
<h1>ToDoList</h1>
<select id="selectTime" v-model="selectTime" required>
<option value="" selected>选择时间</option>
<option v-for='item in timeList' :key=item.id>{{ item }}</option>
</select>
<input type="text" v-model="addSomething" required="required" placeholder="do something"/><button @click="add">提交</button>
<ul id="something">
<li v-for='(value,index) in list' :key=index @click="update(index)">
{{ value.time }} {{ value.thing }}
</li>
<!-- <li v-for=' in list' ></li> -->
</ul>
<done :doneThing="doneThing">
</done>
</div>
</template>
<script>
// import func from '../vue-temp/vue-editor-bridge';
import done from './components/done';
export default {
name: 'App',
components: {
done
},
data(){
return{
addSomething:"",
selectTime:"",
list:[],
doneThing:[],
timeList:['8:00-9:00','9:00-10:00','10:00-11:00','11:00-12:00','12:00-13:00']
}
},
methods:{
add:function(){
// var obj = {
// time:
// }
if(this.selectTime == "" && this.addSomething == ""){
alert("Select Time & Input Something!")
}
else if(this.selectTime == ""){
alert("Select Time!")
}
else if(this.addSomething == "" ){
alert("Input Something!")
}
else{
this.list.push({time: this.selectTime, thing: this.addSomething});
this.addSomething='';
this.selectTime=""
}
},
update:function(index){
//1.赋给完成事项
this.doneThing.push(this.list[index])
//2.移除待办事项
this.list.splice(index,1)
alert('Well Done!')
},
// addTime:function(){
// console.log(this.selectTime)
// },
}
}
</script>
<style scoped>
body {
margin: 0;
padding: 0;
}
#app {
/* position: absolute; */
margin: 0 auto;
padding: 0;
/* text-align: center; */
}
#something {
/* margin: 5px auto; */
/* width: 50%; */
margin: 5 auto;
list-style-type: none;
}
</style>
3. header.vue
<template>
<div id="header">
<!-- <h1>srasd</h1> -->
</div>
</template>
<script>
export default {
name:'app-header',
data(){
return{
}
}
}
</script>
<style scpoed>
#header {
margin: 0;
padding:0;
height: 50px;
width: 100%;
/* position: absolute; */
background-color: gray;
}
</style>