用Vue实现小黑记事本案例

最新推荐文章于 2024-05-16 21:37:28 发布

VillanelleS

最新推荐文章于 2024-05-16 21:37:28 发布

阅读量1.2k

点赞数 2

文章标签： css html5 vue.js

本文链接：https://blog.csdn.net/qq_34306228/article/details/124051816

版权

用Vue实现小黑记事本案例

实现内容
代码介绍
全部代码

实现内容

新增数据
删除操作
统计个数
清空clear
隐藏在无数据时是隐藏状态

代码介绍

输入区域

<div id="record">
        <h1>小黑记事本</h1>
        <div class="text">
            <input type="text" class="inou" placeholder="请输入任务" v-model="req" @keyup.enter="sure">

请添加图片描述

列表区域和底部

<ul>
                <li v-for="(item,index) in arr" @mouseover="over">
                    {{index+1}}. {{item}}
                    <a href="#" class="iconfont" @click="remove(index)" v-show="showing">&#xe607;</a>
                </li>
                <li class="special" v-if="arr!=0">
                    <span class="count">{{count}} items left</span>
                    <a href="javascript:void(0);" class="clear" @click="clear">Clear</a>
                </li>
            </ul>

请添加图片描述

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小黑记事本</title>
</head>
<style>
    @font-face {
        font-family: 'iconfont';
        src: url('font1/iconfont.eot');
        src: url('font1/iconfont.eot?#iefix') format('embedded-opentype'),
            url('font1/iconfont.woff2') format('woff2'),
            url('font1/iconfont.woff') format('woff'),
            url('font1/iconfont.ttf') format('truetype'),
            url('font1/iconfont.svg#iconfont') format('svg');
    }
    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #000;
        position: absolute;
        right: 20px;
    }
    .iconfont:hover,
    .clear:hover{
        color: #00a4ff;
    }
    *{
        margin:0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    #record{
        width: 1000px;
        height: 700px;
        background-color: rgb(250, 250, 250)!important;
        margin: 100px auto;
        box-shadow: 10px 10px 10px rgba(0, 0, 0,0.1),-10px -10px 10px rgba(0, 0, 0, 0.1);
    }
    h1{
        font-weight: 100;
        text-align: center;
        padding: 20px 0;
        color:#00a4ff;
    }
    body{
        background-color:#ccc;
    }
    .text{
        width: 800px;
        height: 50px;
        border: 1px solid #fff;
        margin: 0 100px;
        background-color: #fff;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1),-1px -1px 5px rgba(0, 0, 0, 0.1);
        position: relative;
    }
    .inou{
        margin: 0 20px;
        height: 48px;
        width: 750px;
        font-size: 20px;
        font-weight: 100;
        border: none;
        outline:0;
    }
    ul{
        position: absolute;
        top: 53px;
        width: 800px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1),-1px -1px 5px rgba(0, 0, 0, 0.1);
    }
    ul li{
        text-decoration: none;
        width: 800px;
        border-top: 1px solid rgb(226, 226, 226);
        list-style: none;
        box-sizing: border-box;
        background-color: #fff;
        border-collapse: collapse;
        padding: 0 20px;
        line-height: 60px;
        font-weight: 100;
        color: #333;
        font-size: 20px;
        position: relative;
    }
    .special{
        background: url(images/J1.png) -4px -120px;
        width: 800px;
        height: 60px;
        background-size: 806px;
        position: relative;
    }
    li .count{
        font-size: 14px;
        position: absolute;
        top: -5px;
        color: rgb(131, 131, 131);
    }
    li .clear{
        font-size: 14px;
        position: absolute;
        top: -5px;
        right: 35px;
        color: rgb(131, 131, 131);
        text-decoration: none;
    }
</style>
<body>
    <div id="record">
        <h1>小黑记事本</h1>
        <div class="text">
            <input type="text" class="inou" placeholder="请输入任务" v-model="req" @keyup.enter="sure">
            <ul>
                <li v-for="(item,index) in arr" @mouseover="over">
                    {{index+1}}. {{item}}
                    <a href="#" class="iconfont" @click="remove(index)" v-show="showing">&#xe607;</a>
                </li>
                <li class="special" v-if="arr!=0">
                    <span class="count">{{count}} items left</span>
                    <a href="javascript:void(0);" class="clear" @click="clear">Clear</a>
                </li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var record=new Vue({
            el:"#record",
            data:{
                req:"",
                arr:[],
                index:0,
                count:0,
                showing:true
            },
            methods:{
                sure:function(){
                    // this.arr[this.index]=this.req;
                    // this.index++;
                    this.arr.push(this.req);
                    this.count=this.arr.length;
                    this.req="";
                },
                clear:function(){
                    this.arr=[];
                    this.count=0;
                    this.index=0;
                },
                remove:function(index){
                    this.arr.splice(index,1);
                    this.count=this.arr.length;
                },
                over:function(){
                    // this.showing=!this.showing;
                }
            }
        })
    </script>
</body>
</html>

请添加图片描述
清空效果

VillanelleS

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
用Vue实现小黑记事本案例

用Vue实现小黑记事本案例实现内容代码介绍全部代码实现内容新增数据删除操作统计个数清空clear隐藏在无数据时是隐藏状态代码介绍输入区域<div id="record"> <h1>小黑记事本</h1> <div class="text"> <input type="text" class="inou" placeholder="请输入任务" v-model="req" @
复制链接

扫一扫