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

TOP

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

2019-09-17 18:25:31 【大中小】浏览:44次

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

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

首页上一页 1 2 下一页尾页 1/2/2
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：javascript:void(0)的含义	下一篇：Vue学习之过滤器和自定义指令小结..