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

原文地址:https://www.cnblogs.com/CGWTQ/p/10940246.html

时间: 2024-10-08 04:41:34

02-vue过滤器和键盘修饰符的相关文章

[Vue] : 键盘修饰符

键盘修饰符以及自定义键盘修饰符 为文本框回车键绑定事件 <input type="text" class="form-control" v-model="name" @keyup.enter="add"> 自定义键盘修饰符 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名: Vue.config.keyCodes.f2 = 113; 使用自定义的按键修饰符: <input

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

键盘修饰符以及自定义键盘修饰符 1.vue键盘修饰符[了解即可] ?地址:https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6? 2.x中自定义键盘修饰符 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名: ?Vue.config.keyCodes.f2 = 113;? 使用自定义的按键修饰符: ?<input type="text&

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

1.按键修饰符的使用: 为name文本框添加keyup按键事件:监听特定键enter的事件(enter:Vue内部提供的) <label> Name: <input type="text" class="form-control" v-model="name" @keyup.enter="add"> </label><input type="button" valu

vue中的按键修饰符

在版本2中这样定义的 1. .enter  (回车键) 2. .tab 3..delete  (捕获”删除“和”退格“键) 4. .esc      (退出键) 5. .space  (空格键) 6.  . up 7.  .dowm 8.  .left 9.  .right  (右箭头) 可以通过 Vue.config.keyCodes.f2=113 自定义按键修饰符   f2 是自定义的名称   ,113是键盘对应的码值 原文地址:https://www.cnblogs.com/Progres

Vue中的native修饰符解析

native修饰符 一般来说,vue本身提供了v-on:eventName这个语法来提供vue的时事件绑定,通常使用@eventName这个语法糖代替上述语法. 使用过程中没有考虑@eventName作用标签的类型,因为一般将该语法用在html原生标签,在组件标签上使用的时候,出现了@click="handler"无法触发handler事件. 以下为事故现场: <my-component @click="handler"><my-component

vue学习(六) 事件修饰符 stop prevent capture self once

//html <div id="app"> <div @click="divHandler" style="height:150px,background-color:darkcyan"> <input type="button" value="点击" @click="btnHandler"> </div> <a href="

(二)咋使用VUE中的事件修饰符

1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添加.stop修饰符,如下: 我们发现再次点击按钮后,事件不再冒泡,控制台只打出 2.prevent取消默认事件 .prevent等同于JavaScript的event.preventDefault(),用于取消默认事件.比如我们页面的<a href="#">标签,当用户点击时,

27.28. VUE学习之--事件修饰符之stop&amp;capture&amp;self&amp;once实例详解

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script type="text/javascript"

Vue自定义指令配置修饰符和传参

一和二,请参考https://www.cnblogs.com/zui-ai-java/p/11109213.html 三.index.html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-widt