使用带有.toLocaleString()的计算属性来格式化数字不起作用

I have a range input element that's bound to an amount data property using v-model. I have another <p></p> element that displays the formatted amount returned from a computed property, but the problem is, the number doesn't get formatted.

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>
评论
  • cut
    cut 回复

    This issue here is this.amount actually returns a string. You will need to convert it to a number first like:

    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>

    Or, use a .number modifier to change user input to be automatically typecast as a Number like:

    <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>
  • 云淡,风清
    云淡,风清 回复

    Currently you're calling toLocaleString on a string, not a number, so it won't apply the formatting you're expecting. You need to add the number modifier to your v-model.

    v-model.number="amount"
    

    By default all <input> elements will emit values that are strings, even in cases where you might expect a number. The number modifier tells Vue to convert the string to a number before updating the bound property.

    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>