Vue小案例——图书列表

案例显示

1. 图书列表
   • 实现静态列表效果
   • 基于数据实现模板效果
   • 处里每行的操作按钮
2. 添加图书
   • 实现表单的静态效果
   • 添加图书表单域数据绑定
   • 添加按钮事件绑定
   • 实现添加业务逻辑
3. 修改图书
   • 修改信息填充到表单
   • 修改后重新提交表单
   • 重用添加和修改的方法
4. 删除图书
   • 删除按钮绑定事件处理方法
   • 实现删除业务逻辑

HTML 结构

• 就是一个简单的表格样式

    <div id="app">
        <table>
            <caption><h1>图书管理h1>caption>
            <thead>
                <tr>
                    <td colspan="4">
                        <label>编号：<input type="text" v-model='Nid' :disabled='flag'>label>
                        <label>名称：<input type="text" v-model='Nname'>label>
                        <button @click='add'>提交button>
                    td>
                tr>
                <tr>
                    <td>编号td>
                    <td>名称td>
                    <td>时间td>
                    <td>操作td>
                tr>
            thead>
            <tbody>
                <tr>
                    <td>1td>
                    <td>2td>
                    <td>3td>
                    <td>4td>
                tr>
            tbody>    
        table>
    div>

CSS 样式

• 对表格进行简单的美化

        * {
            margin: 0px;
            padding: 0px;
            vertical-align: middle;
        }
        table {
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        thead {
            background-color: orange;
        }
        thead td {
            font-size: 20px;
            font-weight: 700;
        }
        thead tr td {
            border-bottom: 1px solid #999;
            vertical-align: middle;
        }
        thead input {
            height: 20px;
        }
        td {
            border: 1px solid orange;
            padding: 10px 50px;
            font-weight: 600;
        }

提供的静态数据

• 数据存放在vue 中 data 属性中

var vm = new Vue({
    el: '#app',
    data: {
        books: [{
            id: 1,
            name: '三国演义',
            date: ''
        },
        {
            id: 2,
            name: '水浒传',
            date: ''
        },
        {
            id: 3,
            name: '红楼梦',
            date: ''
        },
        {
            id: 4,
            name: '西游记',
            date: ''
        }]
    }
});

把提供好的数据渲染到页面上

<tbody>
    <tr :key='item.id' v-for='item in books'>
       
       <td>{{item.id}}td>
        
       <td>{{item.name}}td>
       <td>{{item.date}}td>
       <td>
         
         <a href="" @click.prevent>修改a>
         <span>|span>
       	 <a href="" @click.prevent>删除a>
       td>
     tr>
tbody>

对页面进行事件绑定

    <div id="app">
        <table>
            <caption><h1>图书管理h1>caption>
            <thead>
                <tr>
                    <td colspan="4">
                        <label>编号：<input type="text" v-model='Nid' :disabled='flag'>label>
                        <label>名称：<input type="text" v-model='Nname'>label>
                        
                        <button @click='add'>提交button>
                    td>
                tr>
                <tr>
                    <td>编号td>
                    <td>名称td>
                    <td>时间td>
                    <td>操作td>
                tr>
            thead>
            <tbody>
                <tr v-for='(item,index) in books'>
                    <td>{{item.id}}td>
                    <td>{{item.name}}td>
                    <td>td>
                    <td>
                        
                        <a href="" @click.prevent='Modify(index)'>修改a>
                        <span>|span>
                        <a href="" @click.prevent='Delete(index)'>删除a>          
                    td>
                tr>
            tbody>    
        table>
    div>

逻辑层次的JS代码

var vm = new Vue({
    el: '#app',
    data: {
        books: [{
            id: 1,
            name: '三国演义',
            date: ''
        },
        {
            id: 2,
            name: '水浒传',
            date: ''
        },
        {
            id: 3,
            name: '红楼梦',
            date: ''
        },
        {
            id: 4,
            name: '西游记',
            date: ''
        }],
        //初始化input控件的双向绑定的数据
        Nid: '',
        Nname: '',
        Ndate: '',
        //初始化编号input控件是否可用
        flag:false,
    },
    methods: {
        add: function() {
        //创建一个空对象，用来存储从input控件获取过来的值
            let arr = {};
            arr.id = this.Nid;
            arr.name = this.Nname;
            arr.Ndate = this.Ndate;
            //如果编号input控件不可用则修改对应的书籍
            if (this.flag) {
                let index = parseInt(this.Nid)-1;
                Vue.set(this.books,index,arr)
            }
            //反之将获得的数据push到books数组最后面
            else {
                this.books.push(arr);
            }
            //重新初始化所有数值
            this.Nid = '';
            this.Nname = '';
            this.Ndate = '';
            this.flag = false;
        },
        //当点击修改按钮将对应的书籍信息添加到input控件，同时编号input控件不可用
        Modify: function(index) {
            this.Nid = this.books[index].id;
            this.Nname = this.books[index].name;
            this.flag = true;
        },
        //删除对应的书籍信息
        Delete: function(index) {
            this.books.splice(index,1);
        }
    },
});