黑马程序员技术交流社区

标题: 【郑州校区】前端与移动开发之vue-day2（1） [打印本页]

---

作者: 谷粒姐姐    时间: 2018-11-15 13:59
标题: 【郑州校区】前端与移动开发之vue-day2（1）


品牌管理案例添加新品牌删除品牌根据条件筛选品牌

• 1.x 版本中的filterBy指令，在2.x中已经被废除：
  
  
  

filterBy - 指令

[AppleScript] 纯文本查看 复制代码

<tr v-for="item in list | filterBy searchName in 'name'">



  <td>{{item.id}}</td>



  <td>{{item.name}}</td>



  <td>{{item.ctime}}</td>



  <td>



    <a href="#" @click.prevent="del(item.id)">删除</a>



  </td>



</tr>

• 在2.x版本中手动实现筛选的方式：
  
  
  

• 筛选框绑定到 VM 实例中的 searchName 属性：
• [AppleScript] 纯文本查看 复制代码

• 在使用 v-for 指令循环每一行数据的时候，不再直接 item in list，而是 in 一个 过滤的methods 方法，同时，把过滤条件searchName传递进去：
• [AppleScript] 纯文本查看 复制代码

  <tbody>
  
  
  
        <tr v-for="item in search(searchName)">
  
  
  
          <td>{{item.id}}</td>
  
  
  
          <td>{{item.name}}</td>
  
  
  
          <td>{{item.ctime}}</td>
  
  
  
          <td>
  
  
  
            <a href="#" @click.prevent="del(item.id)">删除</a>
  
  
  
          </td>
  
  
  
        </tr>
  
  
  
      </tbody>

• search 过滤方法中，使用 数组的 filter 方法进行过滤：
• [AppleScript] 纯文本查看 复制代码

  search(name) {
  
  
  
    return this.list.filter(x => {
  
  
  
      return x.name.indexOf(name) != -1;
  
  
  
    });
  
  
  
  }
  
  

  
  
  

Vue调试工具vue-devtools的安装步骤和使用

Vue.js devtools - 翻墙安装方式 - 推荐

过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

私有过滤器

• HTML元素：
• [AppleScript] 纯文本查看 复制代码

  <td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>

• 私有 filters 定义方式：
• [AppleScript] 纯文本查看 复制代码

  
  
  filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
  
  
  
      dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
  
  
  
        var dt = new Date(input);
  
  
  
        // 获取年月日
  
  
  
        var y = dt.getFullYear();
  
  
  
        var m = (dt.getMonth() + 1).toString().padStart(2, '0');
  
  
  
        var d = dt.getDate().toString().padStart(2, '0');
  
  
  
  
  
  
  
        // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
  
  
  
        // 否则，就返回  年-月-日 时：分：秒
  
  
  
        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}`;
  
  
  
        }
  
  
  
      }
  
  
  
    }
  
  

• 使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；
  

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2