Vue学习之品牌案例部分代码小结（二）

2019-08-14 09:55:56来源：博客园阅读 ()

品牌案例的增删查和其他部分效果：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap.min.css" />
    <!-- 需要用到Jquery吗？？？其实不需要的jq主要是用Js进行查询、操作DOM元素的，而VUE是用于免除操作DOM的过程，所以不需要加载的 -->
  </head>
  <body>
    <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"
              @keyup.f2="add"
            />
          </label>

          <!-- 在VUE使用事件绑定机制，为元素指定处理函数时，如 果加（）就可以传参数了 -->
          <input
            type="button"
            value="添加"
            class="btn btn-primrary"
            @click="add"
          />
          <label>
            搜索名称关键字：
            <input
              type="text"
              class="form-control"
              v-model="keywords"
              id="search"
              v-focus
              v-color="'red'"
            />
          </label>
        </div>
      </div>

      <table class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Opertion</th>
          </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  | dateFormat(' ')}}</td>
            <td>
              <a href="" @click.prevent="del(item.id)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script>
      //全局的过滤器，进行时间的格式化
      Vue.filter("dateFormat", function(dateStr, pattern = "") {
        //根据给定的时间字符串，得到特定的时间
        var dt = new Date(dateStr);

        var y = dt.getFullYear();
        //后面加的padStart是ES6新用法，自动补全的，长度为2，用0补充！目的是让个位数改成0两位数！
        var m = (dt.getMonth() + 1).toString().padStart(2, "0");
        var d = dt
          .getDate()
          .toString()
          .padStart(2, "0");

        if (pattern.toLowerCase() === "yyyy-mm-dd") {
          return `${y}-${m}-${d}`;
        } else {
          var hh = dt
            .getHours()
            .toString()
            .padStart(2, "0");
          var mm = dt
            .getMinutes()
            .toString()
            .padStart(2, "0");
          var ss = dt
            .getSeconds()
            .toString()
            .padStart(2, "0");

          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
        }
      });

      //自定义全局按键修饰符：新系统自动生成的按键也就几种，这个数字是其按键对应的键值！为避免难以记忆先声明定义下！
      Vue.config.keyCodes.f2 = 113;
      //获取焦点的--使页面刷新就在搜索框内能点取
      Vue.directive("focus", {
        bind: function(el) {},
        inserted: function(el) {
          el.focus();
        },
        update: function(el) {}
      });
      //获取焦点的字体颜色变成指定的颜色！
      Vue.directive("color", {
        bind: function(el, binding) {
          el.style.color = binding.value;
        }
      });
      //创建Vue实例
      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() {
            // 从data上获取id name，组织个对象，用数组的方法进行添加
            var car = { id: this.id, name: this.name, ctime: new Date() };
            this.list.push(car);
            this.id = this.name = "";
          },
          del(id) {
            //根据id删除数据--找到索引，调用数组的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;
            //     }
            // })
            // 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 => {
              //在ES6中，为字符串提供一种新方法，叫String.prototype.includes('要包含的字符串') 相当于contain
              if (item.name.includes(keywords)) {
                return item;
              }
            });
          }
        }
      });
    </script>
  </body>
</html>