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

Posted 2021-12-10 cgwtq

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了02-vue过滤器和键盘修饰符相关的知识，希望对你有一定的参考价值。

过滤器

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

-私有过滤器

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中自定义键盘修饰符

通过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>ID</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>Operation</th>
            </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>

以上是关于02-vue过滤器和键盘修饰符的主要内容，如果未能解决你的问题，请参考以下文章