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

2021-07-12 15:33:57 阅读：207 来源： 互联网

标签：function book 12 bookName 改查 item VUE books id

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

标签：function,book,12,bookName,改查,item,VUE,books,id
来源： https://www.cnblogs.com/WH5212/p/15002140.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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