Vue---- 简单的图书管理

图书管理

<table class="table table-bg table-border table-bordered">
    <tr>
        <th>IDth>
        <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>
        <td>
            <button class="btn" @click="delBook(index)">删除button>
        td>
    tr>
table>

<fieldset>
    <legend>添加新书legend>
    <p>书名：<input type="text" v-model="newBook.name">p>
    <p>作者：<input type="text" v-model="newBook.author">p>
    <p>价格：<input type="text" v-model="newBook.price">p>
    <p><button class="btn" @click="addBook">添加button>p>
fieldset>

<script>
new Vue({
    el:'#books',
    data:{
        books:[
            {id:1, name:'红楼梦', author:'曹雪芹', price:'1'},
            {id:2, name:'西游记', author:'吴承恩', price:'2'},
            {id:3, name:'水浒传', author:'施耐庵', price:'3'}
        ],
        newBook:{
            id:0,
            name:'',
            author:'',
            price:''
        }
    },
    methods:{
        delBook:function(idx){
            if(window.confirm('确认要删除？')){
                this.books.splice(idx, 1);
            }

        },
        addBook:function(){
            // 约束
            if(this.newBook.name.length == 0) {
                alert('书名不能为空');
                return;
            }   

            if(this.newBook.author.length == 0){
                alert('书的作者不能为空');
                return;
            }

            if(this.newBook.price.length == 0){
                this.newBook.price = '0'
            }   

            // 计算插入id
            var maxId = 0;
            for(var i=0; i<this.books.length; i++){
                if(maxId<this.books[i].id){
                    maxId = this.books[i].id;
                }
            }
            this.newBook.id = maxId+1;

            // 插入到 books中
            this.books.push(this.newBook);

            // 清空新书
            this.newBook = {};
        }
    }
});
script>

效果图：