請問 Vue 可以做到 input 顯示 2位小數,但實際是5位小數值,像excel?
舉例: excel可以在單元格輸入 1.23456,顯示時只會顯示 1.23 二位小數,但運算時還是使用 1.23456 去計算
目前能在 vue change 時用 round 近位到 2 位小數,但是實際值也被更改成 1.23
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位小數形式。
可以的,有人貼程式碼我就不貼程式碼了。
VUE是可以將實際值跟顯示值分開顯示的。
就如「揮揮手」給的處理方式。將原值給與一個物件或是函式。
重新出現顯示值即可。
但要注意,不要應用到 input 上。
如要在 input 上應用的話。就得寫觸發應用。
點進去是原值,離開是顯示值。這樣你就得需要兩個參數來處理。
謝謝您,看來沒辦法一個var解決
有個替代方案是用 contenteditable 去做自己的組件。
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
@force 大神,您解決了問題!