实现内容

新增数据
删除操作
统计个数
清空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>

清空效果

用Vue实现小黑记事本案例相关推荐

Vue指令(续)、小黑记事本案例
Vueday2 文章目录 Vueday2 Vue指令(续) v-show v-if v-bind v-for v-model ==案例1==:小黑记事本 Vue指令(续) v-show v-show指 ...
黑马程序员VUE学习笔记-小黑记事本案例
自己写的样式,有很多不足,敬请见谅和指正.功能还是正常的. CSS部分 * {padding: 0;margin: 0; }#todoapp {width: 300px;margin: 5px aut ...
Vue小黑记事本案例
1.小黑记事本效果图 2.代码展示 <!DOCTYPE html> <html><head><meta charset="UTF-8"&g ...
【Vue】小黑记事本
<html><head><meta http-equiv="content-type" content="text/html; charse ...
vue案例小黑记事本详解
大家好,今天学的东西不是很多,但遇到了一个特别有趣的vue小案例吧,我觉得可以拿出来给大家伙练练手,虽然案例简单,并不复杂,但也算是涵盖了vue大部分的常用知识点,希望大家可以多练练,有助于vue的学 ...
vue小案例（小黑记事本和购物车）
vue小案例小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...
b站黑马的Vue快速入门案例代码——小黑记事本
目录目标效果: 重点原理: (1)push()方法--向数组末尾,添加新元素,并返回新长度 (2)v-on可以传递自定义参数,v-on:click="..."的简写是@click ...
四、VUE基础——记事本案例（小黑记事本）
一.分析记事本需要的功能记事本新增事件记事本删除事件记事本统计事件(统计记事本中事件的数量) 记事本清空事件记事本隐藏事件二.记事本案例功能实现 1.新增功能 (1).步骤写好样式后,生成 ...
Vue小案例-小黑记事本的实现
小黑记事本综合应用了前面学习的集中指令,并且对指令进行综合性的基础应用联系.(样式没有写,仅实现了vue指令的功能.) <!DOCTYPE html> <html lang=&quo ...

用Vue实现小黑记事本案例

用Vue实现小黑记事本案例

实现内容

代码介绍

全部代码

用Vue实现小黑记事本案例相关推荐

最新文章

热门文章