我有兩個輸入和一個具有兩個位置的陣列，其中兩個位置都是數字，在每個輸入中，它的 v-model 將在每個位置生成陣列的值，寫入每個輸入會改變陣列中的熱量，這很好。
我正在嘗試在每個輸入中寫入以對其進行格式化并添加數以百萬計的逗號，但將值保留在沒有格式和型別編號的陣列中，我有一個函式可以在控制臺中很好地格式化它，但我無法在輸入，我怎樣才能做到這一點？
<template>
<input
type="text"
class="text-center"
v-model="rangePrice[0]"
/>
<input
type="text"
class="text-center"
v-model="rangePrice[1]"
/>
</template>
<script setup>
const rangePrice = ref([0, 100000000])
// this function displays the formatted value to the console
const format = (e) => {
console.log(rangePrice.value[0].toString().replace(/\D/g, "").replace(/\B(?=(\d{3}) (?!\d))/g, ","))
}
</script>
我正在使用 vue 表單滑塊，其中我有兩個滾動點，這兩個最小值和最大值是陣列的值，當移動條形圖時會將值轉換為數字：
<Slider
class="slider"
v-model="rangePrice"
:lazy="false"
:min="0"
:max="100000000"
:tooltips="false"
/>
uj5u.com熱心網友回復：
嘗試使用v-model 代替@input：:value
const { ref } = Vue
const app = Vue.createApp({
setup() {
const rangePrice = ref([0, 100000000])
const format = (e) => {
return e.toString().replace(/\D/g, "").replace(/\B(?=(\d{3}) (?!\d))/g, ",")
}
const saveInput = (e, i) => {
rangePrice.value[i] = parseInt(e.target.value.replaceAll(',', ''))
}
return {
rangePrice, format, saveInput
};
},
})
app.mount('#demo')<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<input
type="text"
class="text-center"
:value="format(rangePrice[0])"
@input="saveInput($event, 0)"
>
<input
type="text"
class="text-center"
:value="format(rangePrice[1])"
@input="saveInput($event, 1)"
>
{{rangePrice}}
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/532772.html
標籤：javascriptVue.jsVuejs3vue-composition-api
上一篇：用戶離開頁面時呼叫函式