02-vue过滤器和键盘修饰符

过滤器

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

 

-私有过滤器

  1. HTML元素:
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}td>

   2.私有 filters 定义方式:

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}`;

      }

    }

  }

 

-全局过滤器

// 定义一个全局过滤器

Vue.filter('dataFormat', function (input, 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}`;

  }

});

注意:当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!

 

 

键盘修饰符以及自定义键盘修饰符

1.x中自定义键盘修饰符【了解即可】

Vue.directive('on').keyCodes.f2 = 113;

2.x中自定义键盘修饰符

  1. 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名:
Vue.config.keyCodes.f2 = 113;

   2.使用自定义的按键修饰符:

<input type="text" v-model="name" @keyup.f2="add">

 

自定义指令

  1.自定义全局和局部的 自定义指令

// 自定义全局指令 v-focus,为绑定的元素自动获取焦点:

    Vue.directive('focus', {

      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用

        el.focus();

      }

    });



    // 自定义局部指令 v-color 和 v-font-weight,为绑定的元素设置指定的字体颜色 和 字体粗细:

      directives: {

        color: { // 为元素设置指定的字体颜色

          bind(el, binding) {

            el.style.color = binding.value;

          }

        },

        'font-weight': function (el, binding2) { // 自定义指令的简写形式,等同于定义了 bind 和 update 两个钩子函数

          el.style.fontWeight = binding2.value;

        }

      }

  2.自定义指令的使用方式:

<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">

 

 

 

案例:品牌列表

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品牌列表title>
    <script src="./vue-2.4.0.js">script>
    <link rel="stylesheet" href="./bootstrap.min.css">
head>
<body>
<div class="app">


    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加品牌h3>
        div>
        <div class="panel-body form-inline">
            <lable>
                ID: <input type="text" class="form-control" v-model="id">
            lable>
            <lable>
            Name: <input type="text" class="form-control" v-model="name">
            lable>
             <input type="button" value="添加" class="btn btn-primary" @click="add(id)">
            <lable>
                search: <input type="text" class="form-control" v-model="keywords" id="search" v-focus>
            lable>
        div>
    div>


    <table class="table table-bordered table-hover table-striped">
        <thead>
            <tr>
                <th>IDth>
                <th>Nameth>
                <th>Ctimeth>
                <th>Operationth>
            tr>
        thead>
        <tbody>
        <tr v-for="list in search(keywords)"  :key="list.id">
            <td>{{list.id}}td>
            <td v-text="list.name">td>
            <td>{{list.ctime | dataFormat}}td>
            <td><a href="javascript:;" @click.prevent="del(list.id)">删除a>td>
        tr>
        tbody>
    table>
div>


<script>
    //自定义全局指令,调用时要以 v- 开头
    // 参数一 : 指令的名称
    // 参数二 : 是一个对象,指令的处理函数

//     bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。(DOM元素可能没有被插入父节点)
//
//     inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
//
//     update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。

    Vue.directive('focus',{
        inserted:function (el) {
          el.focus();
        }
    });





    //全局过滤器
    Vue.filter('dataFormat',function (dataStr) {
       var dt = new Date(dataStr) ;
       var y = dt.getFullYear();
       var m = dt.getMonth() + 1;
       var d = dt.getDate();
       var h = dt.getHours();
       var mi = dt.getMinutes();
       var s = dt.getSeconds();
       //模板字符串
       return `${y}-${m}-${d} ${h}:${mi}:${s}`;
    });
    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(id){
                var index = this.list.findIndex(item => {
                    if(id == item.id){
                        alert("ID重复");
                        this.id =this.name ='';
                    }else if(id == ''){
                        alert("ID为空")
                    } else{
                        var car ={id: this.id,name: this.name,ctime:new Date()};
                        this.list.push(car);
                        this.id =this.name ='';
                    }
                    return true;
                })

            },
            del(id){

                //方法一:
                //some() 方法测试是否至少有一个元素通过由提供的函数实现的测试
                // this.list.some((item,i) => {
                //     if(item.id == id){
                //         //splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容
                //         this.list.splice(i,1);
                //         return true;
                //     }
                // });

                //方法二:
                //findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引
                var index = this.list.findIndex(item => {
                    if(item.id == id){
                        return true;
                    }
                });
                this.list.splice(index,1);

            },
            search(keywords) { // 根据关键字,进行数据的搜索

                //  都会对数组中的每一项,进行遍历,执行相关的操作;
                return this.list.filter(item => {
                    // if(item.name.indexOf(keywords) != -1)

                    // 注意 : ES6中,为字符串提供了一个新方法,叫做  String.prototype.includes('要包含的字符串')
                    //  如果包含,则返回 true ,否则返回 false
                    //  contain
                    if (item.name.includes(keywords)) {
                        return item
                    }
                })

                // return newList
            }
        }
    });

script>
body>
html>

 

转载于:https://www.cnblogs.com/CGWTQ/p/10940246.html

你可能感兴趣的:(02-vue过滤器和键盘修饰符)