当前位置：网站首页>Brand list cases

Brand list cases

2022-07-27 20:56:00 【Yuzhibo Linzhong Road】

  Add delete check 、 filter

The first 1 Step ：

npm init -y
 Generate  .json file

  The first 2 Step ：

npm i bootstrap -S
 Generate 2 File 

    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap-grid.min.css">
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <link
      rel="stylesheet"
      href="./node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
  </head>

  <body>
    <div id="app">
      <div>
        <label>Id:</label>
        <input type="text" v-model="id" />
        <label>Name:</label>
        <input type="text" v-model="name" />
        <input
          type="button"
          value=" add to "
          class="btn btn-primary"
          @click="add"
        />
        &nbsp;&nbsp;&nbsp;
        <label> Search by brand name ：:</label>
        <input type="text" v-model="keyWords" @change="searchByName" />
      </div>

      <table class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th> operation </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in searchByName()" :key="item.id">
            <td>{
   {item.id}}</td>
            <td>{
   {item.name}}</td>
            <td>{
   {item.ctime}}</td>
            <td>
              <!--  Avoid using unary operators as attribute names delete -->
              <!-- Transmission index  -->
              <a href="http://www.baidu.com" @click.prevent="del(index)"
                > Delete </a
              >
              <!--  Pass on id -->
              <!-- <a href="http://www.baidu.com" @click.prevent="del(item.id)"
                > Delete </a
              > -->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

 <script>
    const app = new Vue({
      el: "#app",
      data: {
        id: "",
        name: "",
        keyWords: "",
        list: [
          { id: 1, name: " Mercedes ", ctime: new Date() },
          { id: 2, name: " BMW ", ctime: new Date() },
          { id: 3, name: " Swift horse ", ctime: new Date() },
          { id: 4, name: " Run ", ctime: new Date() },
        ],
      },
      methods: {
        //  add to 
        add() {
          this.list.push({ id: this.id, name: this.name, ctime: new Date() });
          this.id = this.name = "";
        },
        //  Delete ( Index based )
        del(index) {
          // console.log(index);
          this.list.splice(index, 1);
        },
        //  Delete ( according to id)
        // del(id) {
        //   const index = this.list.findIndex((item) => {
        //     return item.id == id;
        //   });
        //   this.list.splice(index, 1);
        //   // findIndex  If true  Returns an array index 
        // },
        //  lookup 
        //  The first 1 Kind of 
        searchByName() {
          let result = [];
          //  loop list Every one of them , After getting this item , Judge whether the name contains ： keyword , If you include , Add this item to result  in 
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name.indexOf(this.keyWords) != -1) {
              result.push(this.list[i]);
            }
          }
          return result;
        },
        // searchByName() {
        //   let result = [];
        //   //  loop list Every one of them , After getting this item , Judge whether the name contains ： keyword , If you include , Add this item to result  in 
        //   for (let i = 0; i < this.list.length; i++) {
        //     // includes  promising true
        //     if (this.list[i].name.includes(this.keyWords)) {
        //       result.push(this.list[i]);
        //     }
        //   }
        //   return result;
        // },

        //  The first 2 Kind of ( Higher order function )
        // searchByName() {
        //   const newArr = this.list.filter((item) => {
        //     // return item.name.indexOf(this.keyWords) != -1;
        //     return item.name.includes(this.keyWords);
        //   });
        //   return newArr;
        // },
        // searchByName() {
        //   return this.list.filter((item) => {
        //     // return item.name.indexOf(this.keyWords) != -1;
        //     return item.name.includes(this.keyWords);
        //   });
        // },
      },
    });
  </script>

Global filter , The processing time 

npm i moment -s

原网站

版权声明
本文为[Yuzhibo Linzhong Road]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207271811594170.html

边栏推荐

猜你喜欢

随机推荐