Vue学习之品牌案例部分代码小结(二)

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

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

 

posted @ 2019-06-29 07:47  壹叶知秋  阅读(293)  评论(0编辑  收藏  举报