vue小demo

小黑记事本

• 主要功能
  • 添加
  • 删除
  • 汇总
  • 清空

<template>
  <div>
    <!-- 主体区域 -->
    <section id="todoapp">
      <!-- 输入框 -->
      <header class="header">
        <h1>小黑记事本</h1>
        <input v-model="addValue" @keyup.enter="listadd" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
      </header>
      <!-- 列表区域 -->
      <section class="main">
        <ul class="todo-list">
          <li class="todo" v-for="(item,index) in list" :key="index"> 
            <div class="view">
              <span class="index">{{index + 1 + "、"}}</span>
              <label>{{item}}</label>
              
              <button class="destory" @click="delelist(index)">删除</button>
            </div>
          </li>
        </ul>
        <ul class="todo-list"></ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer" v-show="list.length!=0">
        <span class="todo-count">
          <span>{{list.length}}items left</span>
          <button class="todo-clear" @click="listdelete">clear</button>
        </span>
      </footer>
    </section>
    <!-- 底部 -->
    <footer>
     
    </footer>
    
    <!-- <img src="../assets/logo.png" alt=""> -->
  </div>
</template>

<script>
export default {
name:"App",
data () {
  return {
    list:[ "吃饭饭" ,"睡觉觉" ,"喝水水"],
    addValue:"好好学习",
    // sum:this.list.length
  }
},
methods:{
  
  listadd:function(){
    this.list.push(this.addValue);
  },
  listdelete:function(){
    this.list.splice(0,this.list.length)
  },
  delelist:function(index){
    this.list.splice(index,1)
  },
}
}
</script>

<style scoped>
*{
				margin: 0 ;
				padding: 0;
				background-color: #f7f5f6;
			}
			.todo{
				background-color: red !important;
				width: 98%;
				list-style: none;
				line-height: 35px;
				border-top:0.5px solid #E0E0E0;
				border-bottom:0.5px solid #E0E0E0;
				border-left:1px solid #E0E0E0;
				border-right:1px solid #E0E0E0;
			}
			#todoapp{
				width: 280px;
				margin: 100px auto;
			}
			h1{
				font-family:"隶书";
				font-size: 32px;
				color: saddlebrown;
				text-align:center;
				margin-bottom: 40px;
			}
			input::-webkit-input-placeholder {
				color: #9C9C9C;
			}
			.new-todo{
				outline: none;
				width: 95%;
				height: 35px;
				border:1px solid #E0E0E0;
				background-color: white;
				padding:0 4px;
				color: #9C9C9C;
				font-size: 15px;
			}
			.view{
				display: flex;
				padding:0 4px;
				color: #9C9C9C;
				font-size: 15px;
				background-color: white;
			}
			.index{
				flex: 1;
				background-color: white;
			}
			label{
				flex: 10;
				background-color: white;
			}
			.destroy{
				flex: 1;
				display: none;
				color: red;
				border: none;
				background-color: white;
			}
			.view:hover .destroy{
				display: block;
			}
      .image{
        text-align: center;
      }
			.todo-count{
				display: block;
				width: 95%;
				line-height: 20px;
				color: #9C9C9C;
				font-size: 10px;
				padding:0 4px;
				border:0.5px solid #E0E0E0;
				background-color: white;
				/*box-shadow:5px 5px 20px rosybrown;*/
				box-shadow:
     		 		0 0.0625px 0.1875em 0 rgb(0 0 0 / 16%), 
     		 		0 0.5em 0 -0.25em #f2f2f2ed, 
     		 		0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 1), 
     		 		0 1em 0 -0.5em #e5e5e5, 
     		 		0 1em 0.1875em -0.5em rgba(0, 0, 0, 1);
			}		
			strong{
				background-color: white;
			}
			.todo-clear{
				position: relative;
				background-color: white;
				color: #9C9C9C;
				font-size: 10px;
				top: -2px;
				left: 176px;
				border: none;
			}
      #heima{
        text-align: center;
        top: -2px;
				left: 176px;
      }
      
</style>