zoukankan      html  css  js  c++  java
  • vue写的ToDoList


    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ToDoList</title> <link rel="stylesheet" href="dist/css/bootstrap.min.css"> <script src="vue.min.js"></script> </head> <body> <div id="box" class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="form-group"> <label for="exampleInputEmail1">用户名</label><input type="text" class=" user form-control" id="exampleInputEmail1" /> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label><input type="password" class=" psd form-control" id="exampleInputPassword1" /> </div> <button style="300px;margin: 10px auto" @click="submit()" >Submit</button> </div> <div class="col-md-12 column"> <table class="table table-striped"> <thead> <tr> <th class="col-md-2"> 编号 </th> <th class="col-md-4"> 姓名 </th> <th class="col-md-4"> 密码 </th> <th class="col-md-2"> <button type="button" class="btn btn-default btn-primary">按钮</button> </th> </tr> </thead> <tbody> <tr v-for="(m, index) in msg">
                                      <!--官方文档声明:$index和$key被移除 --> <td> {{ index+1 }} </td> <td> {{ m[0] }} </td> <td> {{ m[1] }} </td> <td> <button type="button" class="btn btn-default btn-primary" v-on:click="getIndex(index)">删除</button> </td> </tr> </tbody> </table> </div> </div> </div> <script> var vm=new Vue({ el:"#box", data:{ msg:[["user","123456"],["admin","123"]] }, methods:{ getIndex: function(index){ vm.msg.splice(index,1); }, submit:function(){ var arr=[] var user=document.querySelector(".user").value; var psd=document.querySelector(".psd").value; arr.push(user); arr.push(psd); vm.msg.push(arr); } } }); </script> </body> </html>

      纯属自娱,看客见谅。。。

  • 相关阅读:
    鼠标经过显示边框
    特殊字符
    HTML 列表
    embed 引入网上视频
    锚点定位
    盒子阴影
    Map的四种遍历方式
    Glide的 java.lang.RuntimeException: Expected instanceof GlideModule, but found:X.GlideModule@2e4554f
    Java标识符的命名规则
    django入门与实践
  • 原文地址:https://www.cnblogs.com/teersky/p/7234622.html
Copyright © 2011-2022 走看看