todolist(day_03)

总结：增加对时间下拉框、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 }}&nbsp;&nbsp;&nbsp;{{ 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>