todolist(day_02)

最新推荐文章于 2022-09-24 11:39:56 发布

ZHou moon

最新推荐文章于 2022-09-24 11:39:56 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

分类专栏：放至首页 vue

本文链接：https://blog.youkuaiyun.com/weixin_42734024/article/details/89487690

放至首页同时被 2 个专栏收录

26 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

本文介绍了一个基于Vue.js的To-Do List应用实现，包括如何使用v-model双向绑定输入待办事项，通过v-for指令展示列表项，并实现提交、更新及分类显示功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结：提交事项后清空输入框，将页面分为代办事项与完成事项。

注：root element不能使用v-for，因为这样会生成更多的元素，vue无法渲染。解决：可以在根元素下添加子元素执行v-for，或者使用【Vue-Fragment】库，
<fragment>
        // fragment是一个虚拟标签。  v-for内容，放在<fragment>内部。
    </fragment
展望：数据库，美化。

APP.vue

<template>
  <div id="app">
    <h1>ToDoList</h1>
    <select id="selectTime" v-model="selectTime" >  
      <option value="" selected>选择时间</option>
      <option v-for='item in timeList' :key=item.id>{{ item }}</option>
    </select>
    <input type="text" v-model="addSomething"><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:
      // }
      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>
#app {

  margin: 100 auto;
  text-align: center;
  list-style-type: none;
}
</style>

done.vue

<template>
    <div class="done_thing">
        <h1>DoneList</h1>
        <li  v-for='(value,index) in doneThing' :key=index>
            {{ value.time }}&nbsp;&nbsp;&nbsp;{{ value.thing }}
    
        </li>
    </div>
</template>

<script>
export default {
    props:["doneThing"],
    data(){
        return{

        }
    },
    
}
</script>

<style>
  
</style>