套用價格的 Filter 技巧
step1.
首先，我們先在src資料夾中，新增一個資料夾叫filters，
接著，我們在這個資料夾裡面新增一個currency.js的檔案。
在這個js檔案裡面，貼上網上提供的千分號程式碼。
1
2
3
4
5
6
7
8
| ---currency.js---
export default function (num) {
const n = Number(num);
return `$${n.toFixed(0).replace(/./g, (c, i, a) => {
const currency = (i && c !== '.' && ((a.length - i) % 3 === 0) ? `, ${c}`.replace(/\s/g, '') : c);
return currency;
})}`;
}
|
step2.
接下來，因為我們想要在全域的狀態下啟用這個currency.js的檔案，
所以，我們要將這個檔案注入main.js檔案中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| ---main.js---
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Loading from 'vue-loading-overlay'; // 引入overlay元件
import 'vue-loading-overlay/dist/vue-loading.css'; // 引入overlay元件
import 'bootstrap'
import App from './App'
import router from './router'
import './bus'
import currencyFilter from './filters/currency' // 引入currency.js
Vue.use(VueAxios, axios)
Vue.config.productionTip = false
Vue.component('Loading', Loading); // 啟用overlay元件
Vue.filter('currency', currencyFilter); // 啟用fiter元件-千分號效果
|
注意一下，這邊的curreny是用vue的filter的方式去註冊的喔。
step3.
接下來就到Products.vue元件中將這個千分號的效果套入進去。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| ---Products.vue元件檔---
<tbody>
<tr v-for="(item, key) in products" :key="key">
<td>{{item.category}}</td>
<td>{{item.title}}</td>
<td class="text-right">
{{item.origin_price | currency}} // 加入千分號效果
</td>
<td class="text-right">
{{item.price | currency}} // 加入千分號效果
</td>
<td>
<span v-if="item.is_enabled" class="text-success">啟用</span>
<span v-else>未啟用</span>
</td>
<td>
<button class="btn btn-outline-primary btn-sm" @click="openModal(false, item)">編輯</button>
<button class="btn btn-outline-danger btn-sm" @click="openDelModal(item)">刪除</button>
</td>
</tr>
</tbody>
|
如此，就完成將價格加入千分號的效果囉。