vue-ブランド管理ケース

ブランド管理
ぶんせき

はidとnameを取得し、data上から

を直接取得する.

は、オブジェクト

を組織する.

このオブジェクトを、配列の関連メソッドを呼び出し、現在のdata上のlistに

を追加する

注意:Vueでは、データの双方向バインドが実現されており、dataのデータを変更するたびに、Vueはデフォルトでデータの変更を傍受し、自動的に最新のデータをページに適用します.

div id="app">



    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">    h3>
      div>
      <div class="panel-body form-inline">
        <label>
          Id:
          <input type="text" class="form-control" v-model="id">
        label>

        <label>
          Name:
          <input type="text" class="form-control" v-model="name">
        label>

        
        <input type="button" value="  " class="btn btn-primary" @click="add()">

        <label>
                 ：
          <input type="text" class="form-control" v-model="keywords">
        label>
      div>
    div>



    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th>Idth>
          <th>Nameth>
          <th>Ctimeth>
          <th>Operationth>
        tr>
      thead>
      <tbody>
        
        
        
        <tr v-for="item in search(keywords)" :key="item.id">
          <td>{{ item.id }}td>
          <td v-text="item.name">td>
          <td>{{ item.ctime }}td>
          <td>
            <a href="" @click.prevent="del(item.id)">  a>
          td>
        tr>
      tbody>
    table>



  div>

注:bootstrapを使用

var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        keywords: '', //       
        list: [
          { id: 1, name: '  ', ctime: new Date() },
          { id: 2, name: '  ', ctime: new Date() }
        ]
      },
    methods: {
        add() { 
          var car = { id: this.id, name: this.name, ctime: new Date() }
          this.list.push(car)
          this.id = this.name = ''
        },
        del(id) { //   Id    
          //   ：
          // 1.     Id，           
          // 2.        ，         splice   

          /* this.list.some((item, i) => {
            if (item.id == id) {
              this.list.splice(i, 1)
              //       some    ，   return true，               
              return true;
            }
          }) */
          var index = this.list.findIndex(item => {
            if (item.id == id) {
              return true;
            }
          })

          // console.log(index)
          this.list.splice(index, 1)
        },
        search(keywords) { //      ，       
          /* var newList = []
          this.list.forEach(item => {
            if (item.name.indexOf(keywords) != -1) {
              newList.push(item)
            }
          })
          return newList */

          //   ：  forEach   some   filter   findIndex              ，
          //            ，    ，       ；
          return this.list.filter(item => {
            // if(item.name.indexOf(keywords) != -1)

            //    ： ES6 ，            ，    String.prototype.includes('       ')
            //      ，    true ，     false
            //  contain
            //console.log(keywords);
            if (item.name.includes(keywords)) {
              return item
            }
          })
          }
    });