小码记事本 案例,知识巩固
功能:添加笔记、删除笔记、清空笔记、统计笔记
用到的vue语法:v-on、v-for、v-model、v-text
效果图:
html代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 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>
js代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
css代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>