todos mvc（简易版）实现

最新推荐文章于 2024-05-22 09:42:35 发布

swlsqf

最新推荐文章于 2024-05-22 09:42:35 发布

阅读量349

点赞数 1

文章标签： javascript css vue.js html

本文链接：https://blog.csdn.net/swlsqf/article/details/110677363

版权

一、前言

首先我发布这些是为了记录，更是为了初学代码和我一样的小白，遇到相同的问题不解的时候可以相互借鉴。我会把完整代码都发布出来。
首先实现todos要注意以下3点：①这里的向下箭头和下方隐藏的input框是通过input的id和label的for进行绑定，这样就可以点击label触发input（这点非常重要哦，不然你实现这个全选和单选可能有点难！！）；
在这里插入图片描述
②路由的使用和本地存储的使用，这里分别用了两个js文件，清晰明了；③对于可能出现下方列表双击之后，不修改内容就不会触发失焦事件的同学，需要自定义一个聚焦指令，使它双击之后自动聚焦。因为你不聚焦就不会有失焦事件。
好了，以下上传html、css、js文件，你可以直接复制到你的新页面上查看效果。

二、html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>土豆丝</title>
    <link rel="stylesheet" href="./todos.css">
</head>
<body>
    <div id="todos">
        <h1 class="todos-head">todos</h1>
        <div class="todos-content-head">
        <!-- 添加新列表到下面 -->
        <input type="text" placeholder="What needs to be done?" v-model='inputVal' @keydown.13="addlist" v-focus>
            
        </div>
        <div class="todos-content-content">
            <!-- 通过input的id和label的for进行绑定，这样就可以点击label触发input -->
            <input id="toggle-all" class="toggle-all" type="checkbox" @change="handleAllChange">
            <label for="toggle-all" :class="[{'todos-content-head-noCompleted':true},{'todos-content-head-Completed':judgecheck}]"> ❯ </label>
            <ul class="todos-content-list">
                <li v-for='(item,index) in properlist' @dblclick="editjoin(index)" :key="item.id" @mouseenter='showdel(index)' @mouseleave='hiddendel(index)'>
                 <!-- 这个input初始是隐藏的，双击编辑才会显示出来，控制类名实现。需要注意的是失焦不了的问题，我们自定义指令让他双击后自动聚焦，这样才会有失焦的触发 -->
                 <input type="text" v-input-focus v-model='item.text' @blur="editcomplete(index)" :class="[{'edit':true},{'edit-block':selectIndex===index}]">

                 <input type="checkbox" class="somecheck" v-model='item.checked'>
                 <label :class="[{'default':true},{'textcheck':item.checked}]">{
   {
   item.text}}</label>
                 <span @click="deletehandle(index)" :class="[{'hidden':isShowIndex!=index},{'show':isShowIndex==index}]">X</span>
                </li>
            </ul>
        </div>
        <div class="todos-bottom">

最低0.47元/天解锁文章

swlsqf

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
todos mvc（简易版）实现

一、前言首先我发布这些是为了记录，更是为了初学代码和我一样的小白，遇到相同的问题不解的时候可以相互借鉴。我会把完整代码都发布出来。首先实现todos要注意以下3点：①这里的向下箭头和下方隐藏的input框是通过input的id和label的for进行绑定，这样就可以点击label触发input（这点非常重要哦，不然你实现这个全选和单选可能有点难！！）；②路由的使用和本地存储的使用，这里分别用了两个js文件，清晰明了；③对于可能出现下方列表双击之后，不修改内容就不会触发失焦事件的同学，需要自定义一个聚
复制链接

扫一扫