【郑州校区】前端笔记Vue项目第2天 8

【郑州校区】前端笔记Vue项目第2天 8

5  修改图书-下

5.1  定义一个标识符，主要是控制编辑状态下当前编辑书籍的id 不能被修改即处于编辑状态下当前控制书籍编号的输入框禁用

5.2  通过属性绑定给书籍编号的绑定 disabled 的属性  flag 为 true 即为禁用

5.3  flag 默认值为false 处于编辑状态要把 flag 改为true 即当前表单为禁用

5.4  复用添加方法用户点击提交的时候依然执行 handle 中的逻辑如果 flag为true 即表单处于不可输入状态此时执行的用户编辑数据数据

[AppleScript] 纯文本查看 复制代码

<div id="app">

    <div class="grid">

      <div>

        <h1>图书管理</h1>

        <div class="book">

          <div>

            <label for="id">

              编号：

            </label>

              <!-- 5.2 通过属性绑定 绑定 disabled 的属性  flag 为 true 即为禁用      -->

            <input type="text" id="id" v-model='id' :disabled="flag">

            <label for="name">

              名称：

            </label>

            <input type="text" id="name" v-model='name'>

            <button @click='handle'>提交</button>

          </div>

        </div>

      </div>

      <table>

        <thead>

          <tr>

            <th>编号</th>

            <th>名称</th>

            <th>时间</th>

            <th>操作</th>

          </tr>

        </thead>

        <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='toEdit(item.id)'>修改</a>

              <span>|</span>

              <a href="" @click.prevent>删除</a>

            </td>

          </tr>

        </tbody>

      </table>

    </div>

  </div>  

<script type="text/javascript">

        /*图书管理-添加图书*/

        var vm = new Vue({

            el: '#app',

            data: {

[AppleScript] 纯文本查看 复制代码

// 5.1  定义一个标识符， 主要是控制 编辑状态下当前编辑书籍的id 不能被修改 
              // 即 处于编辑状态下 当前控制书籍编号的输入框禁用 
              flag: false,
              id: '',
              name: '',
             
          },
          methods: {
              handle: function() {
                 /*
                   5.4  复用添加方法   用户点击提交的时候依然执行 handle 中的逻辑
                       如果 flag为true 即 表单处于不可输入状态 此时执行的用户编辑数据数据    
                 */
                  if (this.flag) {
                      // 编辑图书
                      // 5.5  根据当前的ID去更新数组中对应的数据  
                      this.books.some((item) => {
                          if (item.id == this.id) {
                              // 箭头函数中 this 指向父级作用域的this 
                              item.name = this.name;
                              // 完成更新操作之后，需要终止循环
                              return true;
                          }
                      });
                      // 5.6 编辑完数据后表单要处以可以输入的状态
                      this.flag = false;
                  //  5.7  如果 flag为false  表单处于输入状态 此时执行的用户添加数据    
                  } else {
                      var book = {};
                      book.id = this.id;
                      book.name = this.name;
                      book.date = '';
                      this.books.push(book);
                      // 清空表单
                      this.id = '';
                      this.name = '';
                  }
                  // 清空表单
                  this.id = '';
                  this.name = '';
              },
              toEdit: function(id) {
                   /*
                   5.3  flag 默认值为false   处于编辑状态 要把 flag 改为true 即当前表单为禁                      用 
                   */
                  this.flag = true;
                  console.log(id)
                  var book = this.books.filter(function(item) {
                      return item.id == id;
                  });
                  console.log(book)
                  this.id = book[0].id;
                  this.name = book[0].name;
              }
          }
      });
  </script>

帐号		自动登录	找回密码
密码			加入黑马

【郑州校区】前端笔记Vue项目 第2天 8

0 个回复

【郑州校区】前端笔记Vue项目第2天 8