iT邦幫忙

0

請問 Vue 可以做到 input 顯示 2位小數,但實際是5位小數值,像excel效果?

  • 分享至 

  • xImage

請問 Vue 可以做到 input 顯示 2位小數,但實際是5位小數值,像excel?

舉例: excel可以在單元格輸入 1.23456,顯示時只會顯示 1.23 二位小數,但運算時還是使用 1.23456 去計算
目前能在 vue change 時用 round 近位到 2 位小數,但是實際值也被更改成 1.23

bill0704 iT邦新手 5 級 ‧ 2023-12-17 23:36:16 檢舉
vue2可以用filter。Vue3建議乾脆不要用v-model綁定那個input。試試看用focusout event在使用者輸入五位小數點的數字並離開時,把該數值儲存至data的變數中並更新2位小數給該input value。只要邏輯計算時記得call 變數就ok了。
bill0704 iT邦新手 5 級 ‧ 2023-12-17 23:47:53 檢舉
我想到另一種方法是用vue原生的.lazy 。可參考https://book.vue.tw/CH1/1-4-directive.html。然後用watch監聽該input,把五位小數存到另一個data變數中後再更新input為二點小數。缺點是在更新時也會call到watch,所以必須要一個額外邏輯來避開此問題。如檢查位數值決定是否修改data等
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
揮揮手
iT邦研究生 5 級 ‧ 2023-12-13 17:17:32
最佳解答

GPT 回答 概念是 顯示值跟運算值不同即可
在 Vue 中,你可以使用 computed properties 來達成這個需求。你可以保留一個實際的值(5位小數),並創建一個 computed property 來顯示2位小數的值。

以下是一個簡單的範例:

<template>
  <div>
    <input type="number" v-model="actualValue">
    <p>顯示值: {{ displayedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      actualValue: 0,
    };
  },
  computed: {
    displayedValue() {
      return this.actualValue.toFixed(2);
    },
  },
};
</script>

在這個範例中,actualValue 是實際的值,displayedValue 是顯示的值。當你在 input 中輸入數值時,actualValue 會被更新,並且 displayedValue 會自動更新為 actualValue 的2位小數形式。

小MIS iT邦研究生 1 級 ‧ 2023-12-14 08:53:01 檢舉

謝謝您,看來沒辦法一個var解決

3

可以的,有人貼程式碼我就不貼程式碼了。

VUE是可以將實際值跟顯示值分開顯示的。
就如「揮揮手」給的處理方式。將原值給與一個物件或是函式。
重新出現顯示值即可。

但要注意,不要應用到 input 上。
如要在 input 上應用的話。就得寫觸發應用。
點進去是原值,離開是顯示值。這樣你就得需要兩個參數來處理。

小MIS iT邦研究生 1 級 ‧ 2023-12-14 08:53:09 檢舉

謝謝您,看來沒辦法一個var解決

froce iT邦大師 1 級 ‧ 2023-12-14 14:50:12 檢舉

有個替代方案是用 contenteditable 去做自己的組件。
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

範例

小MIS iT邦研究生 1 級 ‧ 2023-12-14 15:24:25 檢舉

@force 大神,您解決了問題!

我要發表回答

立即登入回答