Vue实现CRUD

最新推荐文章于 2024-08-01 14:22:08 发布

reasonzzy

最新推荐文章于 2024-08-01 14:22:08 发布

阅读量2.8k

点赞数

本文链接：https://blog.csdn.net/qq_38839758/article/details/89846135

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/vue.min.js"></script>
  <style type="text/css">
    td{
      border:1px solid gray;
    }
    table{
      border-collapse:collapse;
    }
    div#app{
      margin:20px auto;
      width:400px;
      padding:20px;
    }
  </style>

</head>
<body>
  <div id="app">
    <table id="heroListTable">
      <thead>
        <tr>
          <th>英雄名称</th>
          <th>血量</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="hero in heros ">
          <td>{{hero.name}}</td>
          <td>{{hero.hp}}</td>
          <td>
            <a href="#" @click="edit(hero)">编辑</a>
            <a href="#" @click="deleteHero(hero.id)">删除</a>
          </td>
        </tr>
      <tr>
        <td colspan="3">
          英雄名称：<input type="text" v-model="hero4Add.name"/>
          <br>
          血量：<input type="text" v-model="hero4Add.hp"/>
          <br>
          <button type="button" v-on:click="add">增加</button>
        </td>
      </tr>
      </tbody>
    </table>
    <div id="div4Update">
      英雄名称:
      <input type="text"    v-model="hero4Update.name" />
      <br>
      血量：
      <input type="number"    v-model="hero4Update.hp" />
      <input type="hidden"    v-model="hero4Update.id" />
      <br>
      <button type="button"  v-on:click="update">修改</button>
      <button type="button"  v-on:click="cancel">取消</button>

    </div>
  </div>


</body>
<script type="text/javascript">
  //修改区域隐藏起来先
  $("#div4Update").hide();
  var data = {
    heros: [
      { id: 1, name: '盖伦', hp: 318},
      { id: 2, name: '提莫', hp: 320},
      { id: 3, name: '安妮', hp: 419},
      { id: 4, name: '死歌', hp: 325},
      { id: 5, name: '米波', hp: 422},
    ],
    hero4Add: { id: 0, name: '', hp: '0'},
    hero4Update: { id: 0, name: '', hp: '0'}
  };

  var maxId = 5;
  //计算最大值
  for (var i = 0;i < data.heros.length; i++){
    if(data.heros[i].id > maxId){
      maxId = this.heros[i].id;
    }
  }
  var vue = new Vue({
    el : '#app',
    data : data,
    methods : {
      add : function(event) {
           //获取最大id
            maxId++;
           //赋予新id
            this.hero4Add.id = maxId;
          if(this.hero4Add.name.length == 0)
            //这里if判断条件不要加{},不然只会新增默认值，不会新增输入的值
            this.hero4Add.name = "Hero#" + this.hero4Add.id;
            //把对象加入到数组
            this.heros.push(this.hero4Add);
            //让hero4Add指向新的对象
            this.hero4Add = {id : 0,name : '',hp : '0'}
      },
      deleteHero : function (id) {
        //delete是vue的关键字，不能用作方法名
        for(var i = 0; i < this.heros.length; i++){
          if(this.heros[i].id == id){
            this.heros.splice(i, 1);
            break;
          }
        }
      },
      edit : function (hero) {
        $("#heroListTable").hide();
        $("#div4Update").show();
        this.hero4Update = hero;
      },
      update : function () {
        //因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
        $("#heroListTable").show();
        $("#div4Update").hide();
      },
      cancel : function () {
        //其实就是恢复显示
        $("#heroListTable").show();
        $("#div4Update").hide();
      }
    }
  });
</script>
</html>