zoukankan      html  css  js  c++  java
  • 小黑记事本

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <link rel="stylesheet" type="text/css" href="css/index.css" />
        </head>
        <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 v-show="list.length!=0" class="clear-completed" v-on:click="clear">
                        Clear
                    </button>
                </footer>
            </section>
        </body>
        <script type="text/javascript" src="js/vue-2.6.12.js" ></script>
                
        <script>
            var app=new Vue({
                el:"#todoapp",
                data:{
                    list:["啦啦呀","李易峰呀","吴亦凡呀","憨憨呀"],
                    inputValue:"娜娜家名单"
                },
                methods:{
                    add:function(){
                        this.list.push(this.inputValue);
                    },
                    remove:function(index){
                        console.log(index);
                        this.list.splice(index,1);
                    },
                    clear:function(){
                        this.list=[];
                    }
                    
                }
            })
        </script>
    </html>
  • 相关阅读:
    codechef FNCS
    bzoj2653 middle
    CF698F Coprime Permutation
    CF538H Summer Dichotomy
    CF930E Coins Exhibition
    CF468D Tree
    CF528E Triangles3000
    BZOJ 4066: 简单题
    BZOJ 4300: 绝世好题
    BZOJ 4520: [Cqoi2016]K远点对
  • 原文地址:https://www.cnblogs.com/lxn521/p/13728048.html
Copyright © 2011-2022 走看看