使用計算屬性 with.toLocaleString() 格式化數字不起作用

Question

我有一個range輸入元素，它使用v-model綁定到amount數據屬性。 我有另一個<p></p>元素，它顯示從計算屬性返回的格式化數量，但問題是，數字沒有被格式化。

我期望看到的

12,000

我所看到的

12000

這是一個演示

 new Vue({ el: "#app", data: { amount: 0 }, computed: { formattedAmount(){ return this.amount.toLocaleString() } } })

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h2>Range Formatter</h2> <p>{{formattedAmount}}</p> <input type="range" id="range" v-model="amount" min="0" max="1000000"> </div>

Answer 1

當前，您正在對字符串而不是數字調用toLocaleString ，因此它不會應用您期望的格式。 您需要將number修飾符添加到您的v-model 。

v-model.number="amount"

默認情況下，所有<input>元素都會發出字符串值，即使在您可能期望數字的情況下也是如此。 number修飾符告訴 Vue 在更新綁定屬性之前將字符串轉換為數字。

 new Vue({ el: "#app", data: { amount: 0 }, computed: { formattedAmount() { return this.amount.toLocaleString() } } })

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h2>Range Formatter</h2> <p>{{formattedAmount}}</p> <input type="range" id="range" v-model.number="amount" min="0" max="1000000"> </div>

Answer 2

這里的問題是this.amount實際上返回一個字符串。 您需要先將其轉換為數字，例如：

formattedAmount() {
   return Number(this.amount).toLocaleString();
}

 new Vue({ el: "#app", data: { amount: 0 }, computed: { formattedAmount() { return Number(this.amount).toLocaleString() } } })

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h2>Range Formatter</h2> <p>{{formattedAmount}}</p> <input type="range" id="range" v-model="amount" min="0" max="1000000"> </div>

或者，使用.number修飾符將用戶輸入更改為自動類型轉換為Number ，例如：

<input v-model.number="amount" type="range" id="range" min="0" max="1000000">

 new Vue({ el: "#app", data: { amount: 0 }, computed: { formattedAmount() { return this.amount.toLocaleString() } } })

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h2>Range Formatter</h2> <p>{{formattedAmount}}</p> <input type="range" id="range" v-model.number="amount" min="0" max="1000000"> </div>