js 和vue实现todo记事本增删改查

最新推荐文章于 2023-05-20 17:18:06 发布

自然萌emmm

最新推荐文章于 2023-05-20 17:18:06 发布

阅读量333

点赞数 4

分类专栏： js 文章标签： js vue javascript html jquery

本文链接：https://blog.csdn.net/zi_ran_meng/article/details/118584440

版权

js 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

css 样式



body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    background: #cdcdcd;
}
header {
    height: 62px;
    background: #333;
    background: rgba(35, 35, 35, 0.98);
}
section {
    margin: 0 auto;
}
label {
    float: left;
    width: 100px;
    line-height: 50px;
    color: #ddd;
    font-size: 24px;
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
header input {
    float: right;
    width: 60%;
    height: 32px;
    margin-top: 15px;
    text-indent: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
        0 1px 6px rgba(0, 0, 0, 0.45) inset;
    border: none;
}
input:focus {
    outline-width: 0;
}
h2 {
    position: relative;
}
span {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    padding: 0 5px;
    height: 20px;
    border-radius: 20px;
    background: #e6e6fa;
    line-height: 22px;
    text-align: center;
    color: #666;
    font-size: 14px;
}
ol,
ul {
    padding: 0;
    list-style: none;
}
li input {
    position: absolute;
    top: 2px;
    left: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}
p {
    margin: 0;
}
li p input {
    top: 3px;
    left: 40px;
    width: 70%;
    height: 20px;
    line-height: 14px;
    text-indent: 5px;
    font-size: 14px;
}
li {
    height: 32px;
    line-height: 32px;
    background: #fff;
    position: relative;
    margin-bottom: 10px;
    padding: 0 45px;
    border-radius: 3px;
    border-left: 5px solid #629a9c;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
ul li {
    border-left: 5px solid #999;
    opacity: 0.5;
}
li a {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 14px;
    border: 6px double #fff;
    background: #ccc;
    line-height: 14px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}
footer {
    color: #666;
    font-size: 14px;
    text-align: center;
}
footer a {
    color: #666;
    text-decoration: none;
    color: #999;
}
@media screen and (max-device-width: 620px) {
    section {
        width: 96%;
        padding: 0 2%;
    }
}
@media screen and (min-width: 620px) {
    section {
        width: 600px;
        padding: 0 10px;
    }
}

html 需要引入一下 jq插件网上下载一下就可以

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
        />
        <title>ToDoList </title>
        <link rel="stylesheet" href="./assets/css/style.css" />
    </head>
    <body>
        <header>
            <section>
                <form>
                   
                    <input
                        type="text"
                        id="title"
                        name="title"
                        class="input"
                        placeholder="添加ToDo"
                        required="required"
                        autocomplete="off"
                    />
                </form>
            </section>
        </header>


        <section>
            <h2>正在进行 <span id="todocount">3</span></h2>
            <ol id="todolist" class="demo-box">
                <li>
                    <input type="checkbox" />
                    <p>吃饭</p>
                    <a href="javascript:;">-</a>
                </li>
                <li>
                    <input type="checkbox" />
                    <p>睡觉</p>
                    <a href="javascript:;">-</a>
                </li>
                <li>
                    <input type="checkbox" />
                    <p>打豆豆</p>
                    <a href="javascript:;">-</a>
                </li>
            </ol>
            <h2>已经完成 <span id="donecount">2</span></h2>
            <ul id="donelist">
                <li>
                    <input type="checkbox" checked="checked" />
                    <p>喝酒</p>
                    <a href="javascript:;">-</a>
                </li>
                <li>
                    <input type="checkbox" checked="checked" />
                    <p>蹦迪</p>
                    <a href="javascript:; " class="li3">-</a>
                </li>
            </ul>
        </section>



        <footer>
            <p>
                Copyright &copy; 2021 
                <a href="javascript:;">京ICP备15058198号</a>
            </p>
            <p>
                您当前的ip地址是：<strong id="ipv4">https://api.i‐lynn.cn/getIpInfo</strong
                >，地理位置：<strong id="addr">北京市 电信互联网数据交换中心</strong>
            </p>
        </footer>
        <script src="./assets/js/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="./assets/js/index.js"></script>
    </body>
</html>


$(function () {
      var $title = $("#title");
    load();
    $("#title").on("keydown", function (event) {
        if (event.keyCode === 13) {
            if ($(this).val() === "") {
                window.alert('你还没有添加')
            } else {
                var local = getDate();
                // console.log(local);
                local.push({
                    title: $(this).val(),
                    done: false
                });
                saveDate(local);
                load();
                $(this).val("");
            }
        }
    });
    // 3. toDoList 删除操作
    $("ol, ul").on("click", "a", function () {
        var data = getDate();
        console.log(data);
        var index = $(this).attr("id");
        console.log(index);
        data.splice(index, 1);
        saveDate(data);
        load();
    });
    $("ol, ul").on("click", "input", function () {
        var data = getDate();
        var index = $(this).siblings("a").attr("id");
        console.log(index);
        data[index].done = $(this).prop("checked");
        console.log(data);
        saveDate(data);
        load();
    });
    function getDate() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    }
    function saveDate(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }
    function load() {
        var data = getDate();
        console.log(data);

        $("ol, ul").empty();
        var todoCount = 0;
        var doneCount = 0;

        $.each(data, function (i, n) {

            if (n.done) {
                $("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
                doneCount++;
            } else {
                $("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
                todoCount++;
            }
        });
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    }
})

$(function () {
        $.ajax({
            type: "get",
            url: "https://www.fastmock.site/mock/5199a9d4f7bb99d4ffb8eb29bef98c7a/_data/api/text",
            success: function (res) {
                console.log(res);
                $("#ipv4").html(res.data.ip);
                $("#addr").html(res.data.country + "&emsp;"+ res.data.area);
            },
            error: function (err) {
                console.log(err);
            }
        })
    });

vue 实现

<template>
  <div>
      <my-input @enter="submit"></my-input>
      <hr>
      <list title="正在进行" :data="list" @set-done="changeDone" @del="delItem"></list>

      <list title="已完成" :data="list" done @set-done="changeDone" @del="delItem"></list>
  </div>
</template>

<script>
import Input from '@/components/Input.vue'
import List from '@/components/List.vue'

export default {
    components: {
        'my-input':Input,
        List
    },
    data(){
        return {
            list: [], //所有数据
        }
    },
    methods: {
        submit(val){ //添加数据
            this.list.push({
                name: val,
                done: false //初始化数据的完成状态为，正在进行
            })
        },
        changeDone(item,index){ //用于修改状态的事件函数
            item.done = !item.done
            console.log(item)
        },
        delItem(item){//删除元素
            let index = this.list.indexOf(item)
            if(index != -1){
                this.list.splice(index,1)
            }
        }
    }
}
</script>

<style>

</style>

Input.vue

<template>
  <input type="text" v-model="value" @keypress.enter="handleKey">
</template>

<script>
export default {
    data(){
        return {
            value: ''
        }
    },
    methods: {
        handleKey(){
            this.$emit('enter',this.value)
            this.value = ''
        }
    }
}
</script>

<style>

</style>

List.vue

<template>
  <div>
      <h3>{{title}}({{showData.length}})</h3>
      <ul>
        <li v-for="(item,index) in showData" :key="index">
            <input type="checkbox" :checked="item.done" @click.prevent="handleChangeDone(item,index)">

            <div v-if="index === updateIndex">
                <input type="text" class="update-input" v-model="item.name" @blur="updateIndex = -1" @keypress.enter="updateIndex = -1" ref="updateInp" id="ui">
            </div>
            <div v-else class="text" @click="clickText(index)">{{item.name}}</div>
            
            <button @click="handleDel(item)">删除</button>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
    props: {
        title: String,
        data: Array, //原始数据
        done: { //判断当前要遍历的元素状态，true遍历已完成，false遍历未完成
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            updateIndex: -1 //要修改的元素下标
        }
    },
    computed: {
        showData(){ //用于展示的数组
            return this.data.filter(item=>{
                return item.done == this.done
            })
        }
    },
    updated(){
        let inp = document.getElementById('ui')
        if(inp){
            inp.focus()
        }
    },
    methods: {
        handleChangeDone(item,index){
            this.$emit('set-done',item,index)
        },
        clickText(index){ //点击文本要改变状态为修改状态
            this.updateIndex = index
        },
        handleDel(item){
            this.$emit('del',item)
        }
    }
}
</script>

<style scoped>
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
li{
    height: 40px;
    margin: 10px 0px;
    display: flex;
    align-items: center;
}
.text{
    height: 26px;
    width: 260px;
    cursor: pointer;
}
.update-input{
    width: 260px;
    height: 30px;
}
</style>

自然萌emmm

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 和vue实现todo记事本增删改查

css 样式body { margin: 0; padding: 0; font-size: 16px; background: #cdcdcd;}header { height: 62px; background: #333; background: rgba(35, 35, 35, 0.98);}section { margin: 0 auto;}label { float: left; width:
复制链接

扫一扫