• node32-综合案例图书管理9

     

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <style>
    10.     .grid .total {
    11.         height: 30px;
    12.         line-height: 30px;
    13.         background-color: palegoldenrod;
    14.     }
    15. style>
    16.  
    17. <body>
    18.     <div id="app">
    19.         <div class="grid">
    20.             <div>
    21.                 <h1>图书管理h1>
    22.                 <div class="book">
    23.                     <div>
    24.                         <label for="id">
    25.                             编号:
    26.                         label>
    27.                         <input type="text" id="id" v-model='id' :disabled='flag'>
    28.                         <label for="name">
    29.                             名称:
    30.                         label>
    31.                         <input type="text" id="name" v-model='name'>
    32.                         <button @click='handle'>提交button>
    33.                     div>
    34.  
    35.                 div>
    36.             div>
    37.             <div class="total">
    38.                 <span>图书总数:span>
    39.                 <span>{{total}}span>
    40.             div>
    41.             <table>
    42.                 <thead>
    43.                     <tr>
    44.                         <th>编号th>
    45.                         <th>名称th>
    46.                         <th>时间th>
    47.                         <th>操作th>
    48.                     tr>
    49.                 thead>
    50.                 <tbody>
    51.                     <tr :key='item.id' v-for='item in books'>
    52.                         <td>{{item.id}}td>
    53.                         <td>{{item.name}}td>
    54.                         <td>{{date|format('yyyy-MM-dd')}}td>
    55.                         <td><a href="" @click.prevent='toEdit(item.id)'>修改a>
    56.                             <span>|span>
    57.                             <a href="" @click.prevent='deleteBook(item.id)'>删除a>
    58.                         td>
    59.                     tr>
    60.                     
    61.                     
    62.                 tbody>
    63.             table>
    64.  
    65.         div>
    66.     div>
    67.     <script type="text/javascript" src="./js/vue.js">script>
    68.     <script>
    69.         Vue.filter('format', function(value, arg) {
    70.             //console.log(arg);
    71.             if (arg == 'yyyy-MM-dd') {
    72.                 var ret = '';
    73.                 ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
    74.                 return ret;
    75.             }
    76.             return value;
    77.         })
    78.         var vm = new Vue({
    79.             el: '#app',
    80.             data: {
    81.                 flag: false,
    82.                 id: '',
    83.                 name: '',
    84.                 date: new Date(),
    85.                 books: [{
    86.                     id: 1,
    87.                     name: '三国演义',
    88.  
    89.                 }, {
    90.                     id: 2,
    91.                     name: '三国演义',
    92.                     date: ''
    93.                 }, {
    94.                     id: 3,
    95.                     name: '三国演义',
    96.                     date: ''
    97.                 }, {
    98.                     id: 4,
    99.                     name: '三国演义',
    100.                     date: ''
    101.                 }]
    102.             },
    103.             methods: {
    104.                 handle: function() {
    105.                     if (this.flag) {
    106.                         //编辑操作
    107.                         //就是根据当前的id更新数组中的数据
    108.                         this.books.some((item) => {
    109.                             if (item.id == this.id) {
    110.                                 item.name = this.name;
    111.                                 //完成遍历之后 终止循环
    112.                                 return true;
    113.                             }
    114.                         });
    115.                         this.flag = false;
    116.                     } else {
    117.                         //添加图书
    118.                         var book = {};
    119.                         book.id = this.id;
    120.                         book.name = this.name;
    121.                         book.date = '';
    122.                         this.books.push(book);
    123.                         //清空表单
    124.                         this.id = '';
    125.                         this.name = '';
    126.                     }
    127.                     this.id = '';
    128.                     this.name = '';
    129.                 },
    130.                 toEdit: function(id) {
    131.                     //禁止修改id
    132.                     this.flag = true;
    133.                     console.log(id);
    134.                     //根据id查询要编辑的数据
    135.                     var book = this.books.filter(function(item) {
    136.                         return item.id == id;
    137.                     });
    138.                     console.log(book);
    139.                     this.id = book[0].id;
    140.                     this.name = book[0].name;
    141.                 },
    142.                 deleteBook: function(id) {
    143.                     //根据id从数组中查找索引
    144.                     /* this.books.findIndex(function(item) {
    145.                         return item.id == id;
    146.                     }); */
    147.                     /*   this.books.splice(index, 1); */
    148.                     //------
    149.                     //通过数组filter
    150.                     this.books = this.books.filter(function(item) {
    151.                         return item.id != id;
    152.                     });
    153.                 }
    154.             },
    155.             computed: {
    156.                 total: function() {
    157.                     return this.books.length;
    158.                 }
    159.             }
    160.         })
    161.     script>
    162. body>
    163.  
    164. html>

    运行结果

     

  • 相关阅读:
    【PostgreSQL】PostgreSQL 15移除了Stats Collector
    C++11的shared_ptr共享的智能指针
    jxTMS设计思想之能力扩展
    【Linux】解决缓存锁问题：无法获得锁 /var/lib/dpkg/lock-frontend
    DC2DC电源设计注意事项--1,Feedback
    RestCloud ETL实践之无标识位实现增量数据同步
    TPCH_Q4 的分析优化，对子查询中的 Semi-join 优化
    不要忽视web渗透测试在项目中起到的重要性
    C++经典41问（2个小时快速掌握C++）
    【开发利器】使用OpenCV算子工作流高效开发
  • 原文地址：https://blog.csdn.net/qq_41632427/article/details/126566062