飞奔的炮台 发表于 2021-12-14 16:36:03

(精华)2020年7月12日 vue 简单小结-用户管理

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>练习:用户管理</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- Bootstrap --><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script>    window.onload = function () {      let vm = new Vue({      el: '.container',      data: {          users: [{            name: 'tom',            age: 24,            email: 'tom@itany.com'            },            {            name: 'jack',            age: 23,            email: 'jack@sina.com'            }          ],          user: {},          nowIndex: -1 //当前要删除项的索引      },      methods: {          addUser() {            this.users.push(this.user);            this.user = {};          },          deleteUser() {            if (this.nowIndex == -1) {            //删除所有            this.users = [];            // this.users.length=0;            } else {            //从指定索引的位置开始删除            this.users.splice(this.nowIndex, 1)            }          }      }      });    }</script></head><body><div class="container">    <h2 class="text-center">添加用户</h2>    <form class="form-horizontal">      <div class="form-group">      <label for="name" class="control-label col-sm-2 col-sm-offset-2">姓 名:</label>      <div class="col-sm-6">          <input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名">      </div>      </div>      <div class="form-group">      <label for="age" class="control-label col-sm-2 col-sm-offset-2">年 龄:</label>      <div class="col-sm-6">          <input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">      </div>      </div>      <div class="form-group">      <label for="email" class="control-label col-sm-2 col-sm-offset-2">邮 箱:</label>      <div class="col-sm-6">          <input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱">      </div>      </div>      <div class="form-group text-center">      <input type="button" value="添加" class="btn btn-primary" @click="addUser">      <input type="reset" value="重置" class="btn btn-primary">      </div>    </form>    <hr>    <table class="table table-bordered table-hover">      <caption class="h3 text-center text-info">用户列表</caption>      <thead>      <tr>          <th class="text-center">序号</th>          <th class="text-center">姓名</th>          <th class="text-center">年龄</th>          <th class="text-center">邮箱</th>          <th class="text-center">操作</th>      </tr>      </thead>      <tbody>      <tr v-for="(user,index) in users" :key="index" class="text-center">          <td>{{index+1}}</td>          <td>{{user.name}}</td>          <td>{{user.age}}</td>          <td>{{user.email}}</td>          <td>            <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del"            v-on:click="nowIndex=index">删除</button>          </td>      </tr>      <tr>          <td colspan="5" class="text-right">            <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del"            v-on:click="nowIndex=-1">删除所有</button>          </td>      </tr>      </tbody>    </table>    <!-- 模态框,弹出框 -->    <div class="modal fade" id="del">      <div class="modal-dialog">      <div class="modal-content">          <div class="modal-header">            <button class="close" data-dismiss="modal">            <span>&times;</span>            </button>            <h4 class="modal-title" v-show="nowIndex!==-1">            确认要删除用户:{{users?users.name:''}} 吗?</h4>            <h4 class="modal-title" v-show="nowIndex===-1">确认要删除所有用户吗?</h4>          </div>          <div class="modal-body text-center">            <button class="btn btn-primary" data-dismiss="modal">取消</button>            <button class="btn btn-primary" data-dismiss="modal" v-on:click="deleteUser">确认</button>          </div>      </div>      </div>    </div></div></body></html>





https://blog.51cto.com/u_15437432/4800541
页: [1]
查看完整版本: (精华)2020年7月12日 vue 简单小结-用户管理