2021-7-12 VUE的增删改查功能简单运用

Vue增删改查简易实例
<!DOCTYPE html>
<html>
<head>
    <title>        
    </title>
    <style type="text/css">
      .ulStyle{
        list-style-type: none;
        margin: 10px 30px;
      }
      .divStyle{
        width: 600px;
        height: 400px;
        border: 1px solid gray;
        margin: 100px 400px;
        background-color: gray;
      }
    </style>
</head>
<body>
<div id="app" class="divStyle">
  <div style="margin: 20px;">编号：<input type="text" name="" v-model="book.id" :disabled="flat">书名：<input type="text" name="" v-model.lazy="book.bookName"><input type="button" name="" value="添加" @click="handle"></div>
  <div style="background-color: orange; height: 100%;width: 100%;">
    <ul style="margin-top:20px;">
      <li class="ulStyle" v-for="item in books">{{item.id}}---{{item.bookName}}-------<a href="" @click.prevent="toEdit(item.id)">修改</a>||<a href="" @click.prevent="del(item.id)">删除</a></li>
    </ul>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
new Vue({
  el:'#app',
  data:{
    flat:false,
    book:{id:'',bookName:'',date:''},
    books:[{
      id:1,
      bookName:'斗破苍穹',
      date:''
    },{
      id:2,
      bookName:'遮天',
      date:''
    },{
      id:3,
      bookName:'灵域',
      date:''
    }]
  },
  methods:{
    handle:function(){
      if (this.flat) {
        this.books.some((item) => {
          if (item.id==this.book.id) {
            item.bookName=this.book.bookName;
            console.log(this.book.bookName);
            this.flat=false;
            this.book={};
            return true;
          }});
      }else{
         console.log(this.book);
         this.books.push(this.book);
         this.book={};
      }
    },
    toEdit:function(id){
      var oldbook=this.books.filter(function(item){
          return item.id==id;
        });
      this.book.id=oldbook[0].id;
      this.book.bookName=oldbook[0].bookName;
      this.flat=true;
    },
    del:function(id){
    /* var index= this.books.findIndex(function(item){
        return item.id==id;
      });
      this.books.splice(index,1);*/
      this.books=this.books.filter(function(item){
        return item.id!=id;
      });
    }
  }
});
</script>
</body>
</html>
View Code
原文地址：https://www.cnblogs.com/WH5212/p/15002140.html