vue小练习-记事本

记事本

功能：新增，删除，统计，清空

新增：1.生成列表结构（v-for 数组) 2.获取用户输入(v-model) 3.回车，新增数据。(v-on .enter)

var app = new Vue({
            el:"#todoapp",
            data:{
                list:["吃饭","睡觉"],
                inputValue:"今天学习也很快乐"
            },
            methods:{
                add:function(){//添加功能
                    this.list.push(this.inputValue);
                },
                remove:function(index){//删除功能
                    this.list.splice(index,1)
                }
            }
        })

<section id="todoapp">
        <header class="header">
            <h1>记事本</h1>
            <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
        </header>

 <li class="todo" v-for="(item,index) in list">
                    <div class="view">
                        <span class="index">{{index+1}}</span>
                        <label>{{item}}</label>
                        <button class="destroy" @click="remove(index)">×</button>
                    </div>
                </li>

删除：1.点击删除指定内容（v-on splice v-for可以获得索引）
数据改变，和数据绑定的元素同步改变，事件的自定义参数，删除splice

 methods:{
                add:function(){//添加功能
                    this.list.push(this.inputValue);
                },
                remove:function(index){//删除功能
                    this.list.splice(index,1)
                }
            }

统计：1.统计信息的个数（数组的长度 v-text length）
基于数据的开案工具
找到要修改的位置

 <strong>{{list.length}}</strong> //输入大括号里面的内容

<!-- 统计和清空 -->
        <footer class="footer">
                <span class="todo-count">
                    <strong>{{list.length}}</strong>
                    items left
                </span>
                <button class="clear-completed">Clear</button>
        </footer>

清空
就是把整个数组变为空数组

clear:function(){
                    this.list = [];
                }

隐藏
没有数据时，隐藏元素 v-show v-if 数组非空

<footer class="footer">
                <span class="todo-count" v-if="list.length!=0">
                    <strong>{{list.length}}</strong>
                    items left
                </span>
                <button class="clear-completed" @click="clear" v-show="list.length!=0">Clear</button>
        </footer>

总代码
css：

* {
    padding: 0;
    margin: 0;
}
 
#todoapp {
    width: 300px;
    margin: 5px auto;
    box-shadow: 0px 3px 10px 2px rgba(0,0,0,.1);
 
}
 
.biaoti {
    font:normal 200 34px '微软雅黑' ;
   color:  rgb(219, 82, 82);
   text-align: center;
   padding-top:100px ;
   padding-bottom: 10px;
}
.new-todo{
width: 100%;
height: 40px;
padding-left:10px;
color: rgb(88, 88, 88);
box-sizing:border-box;
border: 1px solid rgb(236, 236, 236);/*这里之前宽写成100%就出现对不齐的问题*/
}
.new-todo:focus{
    outline: none;
}
.footer{
    position: relative;
    width:100%;
    height: 40px;
    box-sizing:border-box; /*border-box你想要设置的边框和内边距的值是包含在width内的.不包含margin*/
    border: 1px solid rgb(236, 236, 236);
    background-color: white;
    
}
 
.footer span{
    font-size: 12px;
    color: rgb(131, 131, 131);
    float: leftr;
    line-height: 40px;
}
.todo-count{
    margin-left: 10px;
}
.clear-completed{
    margin-left: 170px;
}
.todo{
    list-style: none;
    font-size: 14px;
    font-family: '微软雅黑';
    color: rgb(88, 88, 88);
    box-sizing:border-box;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: 1px solid rgb(236, 236, 236);
    background-color: white;
}
.view{
	position: relative;
    margin-left:10px ;
}
 
.view label{
	width: 200px;
	height: 40px;
    position: absolute; 
	overflow: hidden;  /* 超出的文本隐藏*/
	text-overflow: ellipsis;   /* 溢出用省略号显示*/
	white-space:nowrap;   /* 溢出不换行*/
}
.destroy{
    position: absolute;
	 right: 10px;
	 top:9px;
     font-size: 12px;
     font-family: '微软雅黑';
     outline:none;
     border: 1px solid rgb(236, 236, 236);
     color: rgb(255, 111, 111);
     display: none;
}
.view:hover .destroy{         /*这里的.destroy和前面的要有空格，不然奏效*/
    display: block;
}
.reft strong{
    font-weight: 400;
}
.footer button{
    position: absolute;
    right: 10px;
    top: 9px;
    background-color: white;
    border: 0px;
    outline:none;/*去掉选中按钮是边框的颜色*/
    font-size: 12px;
    font-family: '微软雅黑';
    color: rgb(131, 131, 131);
}

html：

<body>
    <section id="todoapp">
        <header class="header">
            <h1>记事本</h1>
            <input v-model="inputValue" @keyup.enter="add" 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">
                    <div class="view">
                        <span class="index">{{index+1}}</span>
                        <label>{{item}}</label>
                        <button class="destroy" @click="remove(index)">×</button>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 统计和清空 -->
        <footer class="footer">
                <span class="todo-count" v-if="list.length!=0">
                    <strong>{{list.length}}</strong>
                    items left
                </span>
                <button class="clear-completed" @click="clear" v-show="list.length!=0">Clear</button>
        </footer>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#todoapp",
            data:{
                list:["吃饭","睡觉"],
                inputValue:"今天学习也很快乐"
            },
            methods:{
                add:function(){//添加功能
                    this.list.push(this.inputValue);
                },
                remove:function(index){//删除功能
                    this.list.splice(index,1)
                },
                clear:function(){
                    this.list = [];
                }
            }
        })
    </script>
</body>