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>

  
  

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>