你写个todo-list要多久？预告：百度某部门日常实习面试即将要考todo-list

预告：百度某部门实习面试即将要考todo-list

mentor让我给候选人出面试题哈哈😄，因为部门主要想招能快速上手业务然后干活的，前端时间在掘金也看到了有面试官考察了手写todo-list，这个小玩意儿还是挺有意思的，考察了数组的一些操作、v-for、动态添加样式，总之数据驱动视图的思想时时刻刻贯穿编码，还是挺考察基本功的。

因为还要给mentor准备题目的答案，我也写了个todo-list，耗时大概在十多分钟，还记得一年前刚学前端的时候，看尚硅谷的课程写的第一个玩具就是todo-list，当时跟着视频磨磨叽叽的敲出来也老高兴了，还发了个说说哈哈。

写这篇文章的目的当然是拯救即将要面试的有缘人啦，绝对不是水篇文章来混点经验😂，秋招也开始了，祝大家，也祝自己顺利

体验地址：todo-list.osrc.com

源码地址：github.com/jinrd123/to…

TodoList.vue：

<script setup>
import {ref} from "vue";
const todo = ref("");
const todoList = ref([]);
const addTodo = () => {
  todoList.value.push({todoName: todo.value, status: false});
  todo.value = "";
}
const deleteTodo = () => {
  todoList.value = todoList.value.filter((todo) => {
    return todo.status !== true;
  })
}
const finishTodo = (index) => {
  todoList.value[index].status = !todoList.value[index].status;
}
</script>
​
<template>
  <div>
    <input type="text" v-model="todo">
    <button @click="addTodo">add todo</button>
  </div>
  <ul>
    <li 
      v-for="todo, index in todoList" 
      :key="index"
      :style="{
        textDecoration: todo.status? 'line-through' : 'none'
      }"
    >
      {{ todo.todoName }}
      <button @click=finishTodo(index)>done</button>
    </li>
  </ul>
  <button @click="deleteTodo">delete finished todos</button>
</template>
​
<style scoped>
​
</style>