vue中的To-Do 应用详解

最新推荐文章于 2025-02-22 10:06:50 发布

Alice_yo

最新推荐文章于 2025-02-22 10:06:50 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： vue js

本文链接：https://blog.youkuaiyun.com/Alice_yo/article/details/108095077

版权

在刚看到vue这个todo的案例时看了源码发现不是很懂写完之后也依旧有点乱本人逻辑不太行就开始一步步的推了一下每一步的作用也全都注释出来了再去写就好多了希望这个博客帮助和我之前一样不太能理解的人有不对的也欢迎指正

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="googlebot" content="noindex, nofollow" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link rel="stylesheet" type="text/css" href="./css/result-light.css" />

  <link rel="stylesheet" type="text/css" href="./css/index.css" />

  <style id="compiled-css" type="text/css">
    /* 结合v-cloak */
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <section class="todoapp">
    <header class="header">
      <h1>任务清单</h1>
      <input autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo" @keyup.enter = "update" 
      v-model.trim="todo"/>
      <!-- 第一步：输入后添加的内容后按键盘的enter键进入新增的方法（@keyup.enter = "update"）  并且输入不能为空 且去除空格（trim） -->
    </header>
    <section class="main">
      <input type="checkbox" class="toggle-all" id="toggle-all" v-model="isCheckAll"/>
      <label for="toggle-all"></label>
      <ul class="todo-list">
        <li v-for="(item, index) in filsTodoList" :class="{completed:item.isCompleted,editing:editingTod

最低0.47元/天解锁文章