vue todos 案例

HTML

<template>
  <section class="todoapp">
    <!-- 头部输入框区域 -->
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo" placeholder="请输入要完成的任务" autofocus />
    </header>
    <section class="main">
      <!-- 全选切换input -->
      <input id="toggle-all" class="toggle-all" type="checkbox" />
      <label for="toggle-all">标记所有已经完成</label>
      <ul class="todo-list">
        <!-- 任务列表 -->
        <li>
          <div class="view">
            <input class="toggle" type="checkbox" checked/>
            <label>写代码</label>
            <button class="destroy"></button>
          </div>
        </li>
        <li >
          <div class="view">
            <input class="toggle" type="checkbox"  />
            <label>打豆豆</label>
            <button class="destroy"></button>
          </div>
        </li>
      </ul>
    </section>
    <footer class="footer">
      <span class="todo-count">
        还未完成的任务有:<strong>3</strong>项
      </span>
    </footer>
  </section>
</template>

vue2

export default {
  data () {
    return {
      list: [{ id: 0, task: '吃饭', isFinish: false },
      { id: 2, task: '睡觉', isFinish: false }],
      task: ''
    }
  },
  computed: {
    undone () {
      return this.list.filter(item => item.isFinish === false).length
    },
    select: {
      get () {
        return this.list.every(item => item.isFinish)
      },
      set (val) {
        this.list.forEach(item => item.isFinish = val)
      }
    }
  },

  methods: {
    // 添加内容
    addTask () {
      this.list.unshift({ id: new Date(), task: this.task, isFinish: false })
    },
    // 删除内容
    delTask (idx) {
      this.list.splice(idx, 1)
    }

  }
}

vue3

import { ref, computed } from 'vue'
export default {
  setup () {
    const list = ref([
      { id: 0, task: '吃饭', isFinish: false },
      { id: 2, task: '睡觉', isFinish: false }
    ])

    const task = ref('')

    // 添加内容
    const addTask = () => {
      list.value.unshift({ id: new Date(), task: task.value, isFinish: false })
    }
    // 删除内容
    const delTask = idx => {
      list.value.splice(idx, 1)
    }
    // 未完成数据 计算 
    const undone = computed(() =>
      list.value.filter(item => item.isFinish === false).length
    )

    // 全选
    const select = computed({
      get () {
        return list.value.every(item => item.isFinish)
      },
      set (val) {
        list.value.forEach(item => item.isFinish = val)
      }
    })
    return { list, task, addTask, delTask, undone, select }
  },
}