欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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 }}&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>