亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue中過濾器的用法

 更新時(shí)間：2022年03月14日 09:48:45   作者：.NET開發(fā)菜鳥  
這篇文章介紹了vue中過濾器的用法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、過濾器

過濾器是vue中的一個(gè)特性，作用是用于對(duì)文本進(jìn)行格式化的作用。

注意：在vue 1.0中有內(nèi)置的過濾器，在2.0中去掉了內(nèi)置過濾器，只有自定義過濾器

二、使用位置

過濾器只能應(yīng)用在兩個(gè)地方：雙花括號(hào)插值和v-bind表達(dá)式(后者從 2.1.0+ 開始支持)。例如：

<!--在雙花括號(hào)中使用 格式：{{值 | 過濾器的名稱}}-->
<div>{{3 | addZero}}</div>
<!--在v-bind中使用 格式：v-bind:id="值 | 過濾器的名稱"-->
<div v-bind:id="1 | addZero">11</div>

三、分類

過濾器分為以下兩種類型：

1、全局過濾器

示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>過濾器</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 定義全局過濾器
           Vue.filter("addZero",function(value){
               // 如果value的值小于10則在前面添加0然后返回，否則直接返回value值
               return value<10?"0"+value:value;
           });
           // 構(gòu)建vue實(shí)例
           new Vue({
               el:"#my",
               data:{
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
        <!--在雙花括號(hào)中使用全局過濾器 格式：{{值 | 過濾器的名稱}}-->
        <div>{{3 | addZero}}</div>
        <div>{{15 | addZero}}</div>
        <!--在v-bind中使用全局過濾器 格式：v-bind:id="值 | 過濾器的名稱"-->
        <div v-bind:id="1 | addZero">11</div>
        <div v-bind:id="12 | addZero">15</div>
    </div>
</body>
</html>

效果：

2、本地過濾器

示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>過濾器</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 定義全局過濾器
           Vue.filter("addZero",function(value){
               // 如果value的值小于10則在前面添加0然后返回，否則直接返回value值
               return value<10?"0"+value:value;
           });
           // 構(gòu)建vue實(shí)例
           new Vue({
               el:"#my",
               data:{
               },
               // 方法
               methods:{

               },
               // 定義本地過濾器
               filters:{
                   roundNum:function(value){
                       // 四舍五入 小數(shù)點(diǎn)后保留兩位
                       return value.toFixed(2);
                   },
                   roundNumWithPara:function(value,digit){
                       // 根據(jù)digit返回相應(yīng)位數(shù)的小數(shù)
                       return value.toFixed(value,digit);
                   }
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
        <!--在雙花括號(hào)中使用全局過濾器 格式：{{值 | 過濾器的名稱}}-->
        <div>{{3 | addZero}}</div>
        <div>{{15 | addZero}}</div>
        <!--在v-bind中使用全局過濾器 格式：v-bind:id="值 | 過濾器的名稱"-->
        <div v-bind:id="1 | addZero">11</div>
        <div v-bind:id="12 | addZero">15</div>
        <!--使用本地過濾器-->
        <div>原始值：3.1415926，過濾后的值：{{3.1415926 | roundNum}}</div>
        <!--保留小數(shù)點(diǎn)后3位-->
        <div>原始值：3.1415926，過濾后的值：{{3.1415926 | roundNumWithPara(3)}}</div>
    </div>
</body>
</html>

效果：

四、過濾器應(yīng)用實(shí)例

1、使用過濾器實(shí)現(xiàn)省略號(hào)

代碼示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用過濾器實(shí)現(xiàn)省略號(hào)</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 構(gòu)建vue實(shí)例
           new Vue({
               el:"#my",
               data:{
                msg:'hello world',
               },
               // 方法
               methods:{

               },
               // 定義本地過濾器
               filters:{
                  // 顯示省略號(hào)
                  toShowEllipsis:function(value,len){
                    if(value ==='' || value=== undefined || value===null) return;
                        if(value.length >= len){
                            var str = value.substr(0,len);
                            return str + '...';
                        }else {
                            return value;
                        }
                  }
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
                <!--添加省略號(hào)    12345...-->
        <input type="text" v-model="msg" >
        {{msg | toShowEllipsis(6)}}
    </div>
</body>
</html>

效果：

2、使用過濾器處理時(shí)間戳

代碼示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用過濾器處理時(shí)間戳</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 構(gòu)建vue實(shí)例
           new Vue({
               el:"#my",
               data:{
                curTime:1546181790
               },
               // 方法
               methods:{

               },
               // 定義本地過濾器
               filters:{
                  // 處理時(shí)間戳  將時(shí)間戳轉(zhuǎn)換成具體時(shí)間
                  toTimeStamp:function(value){
                          //d   表示日期   t 日期和時(shí)間
                        var d = new Date(value*1000);
                        return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds()
                  }
                  
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
        <!--時(shí)間戳-->
        <p>當(dāng)前時(shí)間：{{curTime | toTimeStamp }}</p>
    </div>
</body>
</html>

效果：

到此這篇關(guān)于vue中過濾器用法的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 使用vue實(shí)現(xiàn)加載頁

    使用vue實(shí)現(xiàn)加載頁

    這篇文章主要為大家詳細(xì)介紹了使用vue實(shí)現(xiàn)加載頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • Django Vue實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)權(quán)限

    Django Vue實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)權(quán)限

    本文主要介紹了Django Vue實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)權(quán)限，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • vue3+vite中使用import.meta.glob的操作代碼

    vue3+vite中使用import.meta.glob的操作代碼

    在vue2的時(shí)候，我們一般引入多個(gè)js或者其他文件，一般使用? require.context 來引入多個(gè)不同的文件，但是vite中是不支持 require的，他推出了一個(gè)功能用import.meta.glob來引入多個(gè)，單個(gè)的文件，下面通過本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下
    2022-11-11
  • vue組件間通信子與父詳解（二）

    vue組件間通信子與父詳解（二）

    這篇文章主要為大家詳細(xì)介紹了vue組件間通信子與父的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-11-11
  • 使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用的方法

    使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用的方法

    這篇文章主要介紹了使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-03-03
  • 10分鐘快速上手VueRouter4.x教程

    10分鐘快速上手VueRouter4.x教程

    Vue Router目前最新版本是4.X，本文主要主要介紹了10分鐘快速上手VueRouter4.x教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue.js上下滾動(dòng)加載組件的實(shí)例代碼

    Vue.js上下滾動(dòng)加載組件的實(shí)例代碼

    本篇文章主要介紹了Vue.js上下滾動(dòng)加載組件的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-07-07
  • 在Vue中進(jìn)行數(shù)據(jù)分頁的實(shí)現(xiàn)方法

    在Vue中進(jìn)行數(shù)據(jù)分頁的實(shí)現(xiàn)方法

    在前端開發(fā)中,數(shù)據(jù)分頁是一個(gè)常見的需求,特別是當(dāng)處理大量數(shù)據(jù)時(shí),Vue作為一款流行的JavaScript框架,提供了強(qiáng)大的工具和生態(tài)系統(tǒng)來實(shí)現(xiàn)數(shù)據(jù)分頁,本文將介紹如何在Vue中進(jìn)行數(shù)據(jù)分頁,以及如何設(shè)計(jì)一個(gè)通用的分頁組件,需要的朋友可以參考下
    2023-10-10
  • Vue electron前端開啟局域網(wǎng)接口實(shí)現(xiàn)流程詳細(xì)介紹

    Vue electron前端開啟局域網(wǎng)接口實(shí)現(xiàn)流程詳細(xì)介紹

    用electron寫了一個(gè)自己用的小軟件，無后端，純本地的數(shù)據(jù)。最近想著開發(fā)一個(gè)手機(jī)端app，將PC端的數(shù)據(jù)進(jìn)行同步。為了這小小的功能單獨(dú)寫個(gè)后端又麻煩。干脆前后端不分離哈哈，直接在前端軟件中開啟接口
    2022-10-10
  • 詳解Vue3如何優(yōu)雅的監(jiān)聽localStorage變化

    詳解Vue3如何優(yōu)雅的監(jiān)聽localStorage變化

    最近在研究框架，也仔細(xì)用了Vue3一些功能，所以本文就來和大家聊聊Vue3如何實(shí)現(xiàn)優(yōu)雅的監(jiān)聽localStorage的變化，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-06-06

最新評(píng)論