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>

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

  • 相关阅读:
    linux中grep用法(“或”、“与”)
    mac 常用开发软件列表
    Devops实战(四)Rancher的部署与安装详解
    Devops实战(三)Kubenets与minikube的安装以及使用实战
    intel 无线网卡 AC8260 周期性跳ping(高延迟)解决方案
    确定了,回归吧,19,20就当换了换环境,该努力了。
    win10下用Linux搭建python&nodejs开发环境
    pict总结
    移动无线常用测试工具
    游戏测试工具
  • 原文地址:https://www.cnblogs.com/teersky/p/7234622.html
Copyright © 2011-2022 走看看