vue 记事本

本文转载自查看原文 2020-07-22 12:04 507 vue.js

小码记事本案例，知识巩固

功能：添加笔记、删除笔记、清空笔记、统计笔记

用到的vue语法：v-on、v-for、v-model、v-text

效果图：

html代码：

 1   <!-- 主体区域 -->
 2     <section id="todoapp" class="">
 3         <!-- 输入框 -->
 4         <header class="header">
 5             <h1>小码记事本</h1>
 6             <input v-model="inputValue" autofocus="autofocus" autocomplete="off" 
 7  placeholder="请输入任务" class="new-todo" @keyup.enter="add"/>
 8         </header>
 9         <!-- 列表区域 -->
10         <section class="main">
11             <ul class="todo-list">
12                 <li class="todo" v-for="(item,index) in list">
13                     <div class="view">
14                         <span class="index">{{index+1}}.</span>
15                         <label>{{item}}</label>
16                         <button class="destroy" @click="remove(index)">X</button>
17                     </div>
18                 </li>
19                  <!-- 统计和清空 -->
20                 <li class="todoSum">
21                     <span>
22                         <strong v-text="list.length"></strong>
23                         &nbsp;items total 24                     </span>
25                     <button v-show="list.length!=0" class="clear" @click="clear">Clear</button> 
26                 </li>
27             </ul>
28         </section>
29     </section>

html代码

js代码：

 1  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 2     <script>
 3         var app=new Vue({  4  el:"#todoapp",  5  data() {  6                 return {  7  list:["吃饭饭","睡觉觉","写代码"],  8  inputValue:"",  9  } 10  }, 11  methods: { 12  add:function(){ 13                     this.list.push(this.inputValue); 14  }, 15  remove:function(index){ 16                     this.list.splice(index,1); 17  }, 18  clear:function(){ 19                     this.list=[]; 20  } 21  }, 22  }) 23     </script>

js代码

css代码：

 1 <style> 
 2 #todoapp{
 3  padding-left: 20px;
 4         }
 5  .header{
 6  width:399px;
 7             /* border:1px solid yellowgreen; */
 8  text-align: center;
 9  color: tomato;
10  font-size: 25px;
11             
12         }
13  .header h1{
14  font-weight: lighter;
15  opacity: 0.9;
16         }
17  .new-todo{
18  padding-left: 18px;
19  font-size: medium;
20  width: 382px;
21  height:45px;
22  border:none;
23  border: 1px solid gainsboro;
24  border-radius: 5px 5px 0 0;
25  outline:none;
26             /* background-color: rgb(242, 247, 248); */
27         }
28  .todo-list{
29  border: 1px solid gainsboro;
30  color:gray;
31  width: 360px;
32  margin-top: 0px;
33  box-shadow:4px 4px 8px gainsboro;
34  border-radius: 0 0 15px 15px;
35             /* background-color: rgb(242, 247, 248); */
36         }
37  .todo{
38  width: 370px;
39  height: 36px;
40  padding-top: 10px;
41  margin-left: -26px;
42  border-bottom:1px solid gainsboro;
43  list-style-type: none;
44            
45         }
46  .todoSum{
47  list-style-type: none; 
48  height: 30px;
49  padding-top: 10px;
50  margin-left: -26px;
51  font-size: small;
52  opacity:0.7;
53         }
54  .clear{
55  position: relative;
56  left:240px;
57  color:gray;
58  border: none;
59  outline: none;
60  background-color: transparent;
61         }
62  .destroy{           
63  position: absolute;
64  left:380px;
65  border: none;
66  opacity: 0.2;
67             /* display: none; */
68  color:gray;
69         }
70  .destroy:hover{
71  opacity: 0.8;
72         }
73     </style>

css代码

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 基于vue2.0+vuex+localStorage开发的本地记事本 Android简易记事本 Python编写记事本 JAVA 编写的记事本 Android实现记事本 python 操作记事本我的记事本在哪里打开? Android 简单记事本记事本代码 Delphi 记事本 TMemo