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

4 修改图书-上


点击修改按钮的时候 获取到要修改的书籍名单


4.1  给修改按钮添加点击事件，  需要把当前的图书的id 传递过去 这样才知道需要修改的是哪一本书籍


把需要修改的书籍名单填充到表单里面


4.2  根据传递过来的id 查出books 中 对应书籍的详细信息


4.3 把获取到的信息填充到表单

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

<div id="app">

    <div class="grid">

      <div>

        <h1>图书管理</h1>

        <div class="book">

          <div>

            <label for="id">

              编号：

            </label>

            <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>

              <!---

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

4.1  给修改按钮添加点击事件，  需要把当前的图书的id 传递过去 

                这样才知道需要修改的是哪一本书籍

                --->  

              <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: {

        flag: false,

        id: '',

        name: '',

        books: [{

          id: 1,

          name: '三国演义',

          date: ''

        },{

          id: 2,

          name: '水浒传',

          date: ''

        },{

          id: 3,

          name: '红楼梦',

          date: ''

        },{

          id: 4,

          name: '西游记',

          date: ''

        }]

      },

      methods: {

        handle: function(){

          // 3.4 定义一个新的对象book 存储 获取到输入框中 书 的id和名字 

          var book = {};

          book.id = this.id;

          book.name = this.name;

          book.date = '';

         // 3.5 把book  通过数组的变异方法 push 放到    books 里面

          this.books.push(book);

          //3.6 清空输入框

          this.id = '';

          this.name = '';

        },

        toEdit: function(id){

          console.log(id)

          //4.2  根据传递过来的id 查出books 中 对应书籍的详细信息

          var book = this.books.filter(function(item){

            return item.id == id;

          });

          console.log(book)

          //4.3 把获取到的信息填充到表单

          // this.id   和  this.name 通过双向绑定 绑定到了表单中  一旦数据改变视图自动更新

          this.id = book[0].id;

          this.name = book[0].name;

        }

      }

    });

  </script>

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

4 修改图书-上


点击修改按钮的时候 获取到要修改的书籍名单


4.1  给修改按钮添加点击事件，  需要把当前的图书的id 传递过去 这样才知道需要修改的是哪一本书籍


把需要修改的书籍名单填充到表单里面


4.2  根据传递过来的id 查出books 中 对应书籍的详细信息


4.3 把获取到的信息填充到表单

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

<div id="app">

    <div class="grid">

      <div>

        <h1>图书管理</h1>

        <div class="book">

          <div>

            <label for="id">

              编号：

            </label>

            <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>

              <!---

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

4.1  给修改按钮添加点击事件，  需要把当前的图书的id 传递过去 

                这样才知道需要修改的是哪一本书籍

                --->  

              <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: {

        flag: false,

        id: '',

        name: '',

        books: [{

          id: 1,

          name: '三国演义',

          date: ''

        },{

          id: 2,

          name: '水浒传',

          date: ''

        },{

          id: 3,

          name: '红楼梦',

          date: ''

        },{

          id: 4,

          name: '西游记',

          date: ''

        }]

      },

      methods: {

        handle: function(){

          // 3.4 定义一个新的对象book 存储 获取到输入框中 书 的id和名字 

          var book = {};

          book.id = this.id;

          book.name = this.name;

          book.date = '';

         // 3.5 把book  通过数组的变异方法 push 放到    books 里面

          this.books.push(book);

          //3.6 清空输入框

          this.id = '';

          this.name = '';

        },

        toEdit: function(id){

          console.log(id)

          //4.2  根据传递过来的id 查出books 中 对应书籍的详细信息

          var book = this.books.filter(function(item){

            return item.id == id;

          });

          console.log(book)

          //4.3 把获取到的信息填充到表单

          // this.id   和  this.name 通过双向绑定 绑定到了表单中  一旦数据改变视图自动更新

          this.id = book[0].id;

          this.name = book[0].name;

        }

      }

    });

  </script>