tags: `筆記` `Javascript` `Vue`

在一些特定情況會需要做 Html 上呈現一些格式化的內容

像是如下：千分數分組、英文字的首字做大寫的設定

Abc、123,456

在 Vue3 這個版本，就移除了 filter 這項功能

{{ num | Currency }}

取而代之是利用 function 的形式做處理

{{Currency(num)}}

在大部分的情況都可以利用以上 function 的方式完成，但遇到像以下 v-model 的情況就會無法簡單地完成

<input type="text" v-model="num" />

是由於 v-model 這個語法糖會同時幫忙做以下事情，如下

<input type="text" :value="num" @input="something">

所以要做一些客製化的事情，就要把以上 v-model 幫忙的事情實做

下面用千分數分組為例 (用 GPT 就可以問到)

//先實做千分數分組的 function
const toThousandsSep  = (value) => {
  if (!value && value !== 0) return 0;

  let isPositive = value >= 0;

  const intPart = Math.trunc(Math.abs(value));

  const intPartFormat = intPart
    .toString()
    .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");

  let floatPart = "";

  const valueArray = value.toString().split(".");
  if (valueArray.length === 2) {
    floatPart = `.${valueArray[1].toString()}`;
  }
  return (!isPositive ? "-" : "") + `${intPartFormat}${floatPart}`;
};

在畫面上就如下使用

<input type="text" :value="toThousandsSep(num)">

但只有單純的綁定 value 在後續的變更會無法傳回 num ，接著繼續完成 @input 事件

最後，完整的程式碼如下
<iframe height="300" style="width: 100%;" scrolling="no" title="Vue toThousandsSep" src="https://codepen.io/chinggo/embed/VwVqQGa?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/chinggo/pen/VwVqQGa">
Vue toThousandsSep</a> by chinggo (<a href="https://codepen.io/chinggo">@chinggo</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
假如有太多的地方需要重複使用，就是用 directive、component 封裝