使用vuejs实现简单的图书增加删除功能

概要：

1、实现删除功能。

2、实现增加功能。

代码：

css

table,td{
      border: 1px solid #ccc;
      border-collapse: collapse;
    }
    table,fieldset{
      width: 1090px;
      margin:20px auto;
      text-align: center;
    }

html

<div id="app">
  <table>
    <tr>
      <th>ID</th>
      <th>书名</th>
      <th>作者</th>
      <th>价格</th>
      <th>操作</th>
    </tr>

    <!-- 循环输出数据 -->
    <tr v-for="(book,index) in books">
      <td>{{book.id}}</td>
      <td>{{book.name}}</td>
      <td>{{book.author}}</td>
      <td>{{book.price}}</td>
      <!-- 点击删除，即将newBooks增添到book里面 -->
      <td><input @click="del(index)" type="button" value="删除"></td>
    </tr>
  </table>
  
  <fieldset>
    <legend>添加新书</legend>
    <p>书名：<input v-model="newBooks.name" type="text"></p>
    <p>作者：<input v-model="newBooks.author" type="text"></p>
    <p>价格：<input v-model="newBooks.price" type="text"></p>
    <!-- 点击增加，即将newBooks增添到book里面 -->
    <p><button @click="add">添加</button></p>
  </fieldset>
</div>

js

new Vue({
    el:'#app',
    data:{
      books:[
        {id:1,name:'三国演义',author:'罗贯中',price:88.88},
        {id:2,name:'红楼梦',author:'曹雪芹',price:88.88},
        {id:3,name:'水浒传',author:'施耐庵',price:88.88},
        {id:4,name:'西游记',author:'吴承恩',price:88.88},
      ],
      newBooks:{
        id:0,
        name:'',
        author:'',
        price:'',
      }
    },
    methods:{
      del:function(idx){
        this.books.splice(idx,1);//删除
      },
      add:function(){
        var maxId=0;
        //找出最大ID
        for(var i=0;i<this.books.length;i++){
            if(maxId<this.books[i].id){
              maxId=this.books[i].id;
            }
        }
        this.newBooks.id=maxId+1;
        this.books.push(this.newBooks);//追加
        this.newBooks={};//清空
      }

    }
  });