2.记事本

小黑记事本

功能

  1. 新增
  2. 删除
  3. 统计
  4. 清空
  5. 隐藏

结构

<div id="app">
	<div class="book-top">
	</div>
	<div class="book-center">
	</div>
	<div class="book-foot">
	</div>
</div>

image

实现

新增：新增任务

1.生成列表结构

v-for循环数组
创建list数组，在html标签上绑定遍历v-for="(item,index) in list"

 <li v-for="(item,index) in list">
  {{index}}{{item}}
 </li>

2.获取用户输入

v-model
为input绑定v-model,获取到数据输入的内容

<input type="text" placeholder="添加任务" v-model="inputVle" >

3.回车新增数据事件

@keyup.enter
为input创建一个函数，push()方法实现list数组新增

this.list.push(this.inputVle);//增加数据

删除：删除任务

为删除按钮添加删除事件函数，pop()方法实现list数组删除

this.list.pop(this.inputVle);//删除数据

统计：统计任务总数

length方法求list数组长度实现

{{list.length}}

清空：点击任务清空

添加点击事件，点击list数组数组内容清空

 this.list=[];

隐藏：清空后隐藏清空按钮和总数按钮

当list的长度不等于0时隐藏功能按钮，使用v-if或v-show

 <span v-if="list.length!=0">共{{list.length}}条</span>  
 <span v-show="list.length!=0">clean</span>

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://use.fontawesome.com/e9934fb665.js"></script>
    <!-- <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> -->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>小黑记事本</title>
</head>
<body>
    <div id="app">
        <div class="book-top">
            <input type="text" placeholder="添加任务" v-model="inputVle" @keyup.enter="add">
        </div>
        <div class="book-ctn">
            <ul>
                <li v-for="(item,index) in list">
                    <div>
                        <p>
                            <span>{{index+1}}&nbsp;</span>
                            {{item}}
                        </p>
                    </div>
                    <div @click="del">
                        <i class="fa fa-times" aria-hidden="true"></i>
                    </div>
                </li>
            </ul>
        </div>
        <div class="book-foot">
            <div>
             <span v-if="list.length!=0">共{{list.length}}条</span>  
            </div>
            <div @click="clean">
             <span v-show="list.length!=0">clean</span> 
            </div>
        </div>
    </div>
</body>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            list:["好好学习，天天向上"],
            inputVle:""
        },
        methods:{
            add:function(){
                this.list.push(this.inputVle);//增加数据
            },
            del:function(){
                this.list.pop(this.inputVle);//删除数据
            },
            clean:function(){
                this.list=[];
            }
        }
    })
</script>
</html>
posted @ 2021-10-27 19:54  禾耳  阅读(37)  评论(0)    收藏  举报