Day 13 Vue Filter 過濾器介紹 | Vue filter vs method
本文同步發表於AndysBlog[1]前言昨天我們將computed、methods()、watch,三個屬性做了一個簡單比較。而今天我們將要介紹另外一個屬性filter。Filter介紹目的:主要用在處理格式化文字(如:千分號:$1,000、英文大小寫轉換等狀況)綁定方式:使用雙大括號Mustache語法{{}}或是V-bind表達式(2.10版本後開始支持)示範:1.Mustache語法{{message|captialize}}2.v-bind
本文同步發表於Andys Blog[1]
前言昨天我們將computed、methods()、watch,三個屬性做了一個簡單比較。而今天我們將要介紹另外一個屬性filter。
Filter介紹目的:主要用在處理格式化文字(如:千分號:$1,000、英文大小寫轉換等狀況)綁定方式:使用雙大括號Mustache語法{{}}或是V-bind表達式(2.10版本後開始支持)示範:
1.Mustache語法 {{message | captialize}} 2.v-bind <div v-bind:id="rawId | formatId"></div>特性:1.使用|,pipe符號可以連結不同filter(數量不限)2.由左到右執行(順序將影響結果) EX: {{ message | captialize | dollarSign }}註冊方式:分為區域註冊、全域註冊
區域註冊範例連結[2]HTML部分
<div id="app"> <p>{{ price | currency | filterDollarSign }}</p> </div>JavaScript部分
var vm = new Vue({ el: #app, data: { price: 199999 }, //轉為千分號 filters:{ currency(price){ return price.toFixed(2).replace(/d(?=(d{3})+.)/g, $&,) /* return price.toLocaleString(en-US); 寫法二:轉為千分號*/ }, //添加$字號 filterDollarSign(price){ return `$ ${price}` } } })說明:區域註冊撰寫注意:filters限制:僅存在Vue Instance中...