02-vue過濾器和鍵盤修飾符

時間 2019-12-10

標籤 vue 過濾器鍵盤修飾简体版

原文原文鏈接

過濾器

概念：Vue.js 容許你自定義過濾器，可被用做一些常見的文本格式化。過濾器能夠用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由「管道」符指示；javascript

-私有過濾器

HTML元素：

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

　　 2.私有 filters 定義方式：css

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

  }

});

注意：當有局部和全局兩個名稱相同的過濾器時候，會以就近原則進行調用，即：局部過濾器優先於全局過濾器被調用！html

鍵盤修飾符以及自定義鍵盤修飾符

1.x中自定義鍵盤修飾符【瞭解便可】

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

2.x中自定義鍵盤修飾符

經過Vue.config.keyCodes.名稱 = 按鍵值來自定義案件修飾符的別名：

Vue.config.keyCodes.f2 = 113;

　　 2.使用自定義的按鍵修飾符：vue

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

自定義指令

　　1.自定義全局和局部的自定義指令java

// 自定義全局指令 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.自定義指令的使用方式：bootstrap

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。