首頁 web前端 js教程 Vue filter介紹及其使用

Vue filter介紹及其使用

May 30, 2018 pm 02:37 PM
filter 介紹 使用

本文主要介紹了Vue filter介紹及其使用詳解,VueJs 提供了強大的過濾器API,能夠對資料進行各種過濾處理。一起跟著小編過來看看吧,希望能幫助大家。

VueJs 提供了強大的過濾器API,能夠對資料進行各種過濾處理,傳回所需的結果

##Vue 過濾器的基本用法

// 注册
Vue.filter('my-filter', function (value) {
 // 返回处理后的值
})
// getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
登入後複製
//在mustache中使用
{{ msg | uppercase }}
登入後複製

//在标签中使用
<input type="password" v-model="psw | validate">
登入後複製

預設的過濾器

注意:在Vue 2.0版本中已經廢棄使用預設過濾器


名稱功能#capitalize#首字母大寫uppercase全部大寫#lowercase##currency#pluralize debouncelimitBy filterByorderBy
##全部小寫
輸出金錢以及小數點
輸出複數的形式
延期執行函數
在v-for 中使用,限制數量
在v-for 中使用,選擇資料
在v-for 中使用,排序
#自訂篩選器

使用全域定義一個篩選器

 //过滤非法字符
 Vue.filter('validate', function(val) {
  val = val.toString();
  reg = /[`~!@#$%^&*()_+<>?:"{},\/;']/im;

  if(reg.test(val)) {
   $.alert("请勿输入非法字符", "温馨提示");
   //返回时删除非法字符
   return val.substr(0, val.length - 1);
  } else {
   //原内容返回
   return val;
  }
 });
登入後複製

在表單中使用

<input type="password" placeholder="输入密码" v-model="psw | validate" maxlength = "18">
登入後複製

相關推薦:


詳解CSS3的filter濾鏡屬性

#JavaScript中filter函數的詳細介紹

JavaWeb Servlet中關於Filter過濾器的實例分析

以上是Vue filter介紹及其使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用mdf和mds文件 如何使用mdf和mds文件 Feb 19, 2024 pm 05:36 PM

如何使用mdf和mds文件

crystaldiskmark是什麼軟體? -crystaldiskmark如何使用? crystaldiskmark是什麼軟體? -crystaldiskmark如何使用? Mar 18, 2024 pm 02:58 PM

crystaldiskmark是什麼軟體? -crystaldiskmark如何使用?

foob​​ar2000怎麼下載? -foobar2000怎麼使用 foob​​ar2000怎麼下載? -foobar2000怎麼使用 Mar 18, 2024 am 10:58 AM

foob​​ar2000怎麼下載? -foobar2000怎麼使用

網易信箱大師怎麼用 網易信箱大師怎麼用 Mar 27, 2024 pm 05:32 PM

網易信箱大師怎麼用

小愛音箱怎麼用 小愛音箱怎麼連接手機 小愛音箱怎麼用 小愛音箱怎麼連接手機 Feb 22, 2024 pm 05:19 PM

小愛音箱怎麼用 小愛音箱怎麼連接手機

百度網盤app怎麼用 百度網盤app怎麼用 Mar 27, 2024 pm 06:46 PM

百度網盤app怎麼用

教你使用 iOS 17.4「失竊裝置保護」新進階功能 教你使用 iOS 17.4「失竊裝置保護」新進階功能 Mar 10, 2024 pm 04:34 PM

教你使用 iOS 17.4「失竊裝置保護」新進階功能

BTCC教學:如何在BTCC交易所綁定使用MetaMask錢包? BTCC教學:如何在BTCC交易所綁定使用MetaMask錢包? Apr 26, 2024 am 09:40 AM

BTCC教學:如何在BTCC交易所綁定使用MetaMask錢包?

See all articles