初学Vue(记事本) | 易学教程

增删同步，清空，
v- for(item,index)
v- model =“message”
@click = “del”
@keyup.enter = “add”
v-show =“list.length!=0”
<!DOCTYPE html>
<html>
    <head>
        <title>Vue</title>
        <style>
           #app{
               margin:0 auto;
               /* border: 1px solid red; */
               width: 300px;
               background-color: #fff;
           }
           ul{
               padding: 0;
               margin: 0;
           }
           input{
                width: 200px;
                height: 35px;
           }
           li{
               list-style: none;
               border: 1px solid #666;
               width: 200px;
               height: 30px;
           }
           button.del{
               margin-left: 115px;
               display: none;
           }
           li:hover button{
               display: inline-block;
           }
           .bottom{
                border: 1px solid #666;
                width: 200px;
                height: 25px;
           }
           span.total{
               margin-left: 5px;
           }
           span.clear{
               margin-left: 100px;
               cursor: pointer;
           }
        </style>
    </head>
    <body>
        <div id="app">
            <h1>记事本</h1>
            <input type="text" v-model="message" @keyup.enter ="add" value="请输入" onfocus="if(this.value=='请输入'){this.value =''}" onblur="if(this.value==''){this.value ='请输入'}">
            <div class="todo-list">
                <ul>
                    <li v-for = "(item,index) in list">
                        <span class="number"> {{index+1}} </span>
                        <span class="content"> {{item}} </span>
                        <button class="del" @click = "del"> ×</button>
                    </li>
                </ul>
                <div class="bottom" v-show = "list.length!=0">
                    <span class="total">total:{{list.length}}</span>
                    <span class="clear" @click = "clear">clear</span>
                </div>
            </div>
        </div>


    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               list:["吃饭","睡觉"],
               message:"学习",
            },
            methods:{
                add:function(){
                    this.list.push(this.message);
                },
                del:function(index){
                    this.list.splice(index,1);//对应索引值和删除个数
                },
                clear:function(){
                    this.list = [];
                },
               
            },
            
        })
        
    </script>
    </body>

</html>
来源：CSDN
作者：weixin_44040169
链接：https://blog.csdn.net/weixin_44040169/article/details/104727293
标签
vue
list