How to use vue.js to implement price formatting (code attached)

The following is the vue.js price formatting I compiled for you. Interested students can take a look.

Here is a commonly used price formatting method, which is very practical in e-commerce price processing. We can see the effect

Here a filter is used in the price data, and the price is processed by retaining decimal places through this filter.

HTML

<div class="price">
   <span v-html="goods.sale_price|format"></span>
   <span class="price-before">￥{{＂这里是价格数据＂}}
   </span>
  </div>

JS

filters:{      //数据过滤器
format:function(value){
var html,_val;
value =Number(value).toFixed(2);
if(value==0){
value=0;
return html = "￥<span>0</span>";
}else if(value.split(&#39;.&#39;)[1].substring(1)==0){
value = Number(value).toFixed(1);
}
_val = value.split(&#39;.&#39;);
return html = &#39;￥<span>&#39;+_val[0]+&#39;</span><em>.&#39;+_val[1]+&#39;</em>&#39;;
}
}

The above is the vue.js price formatting I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

JS native code implements two-way data binding (can be used directly, already encapsulated)

Detailed explanation of the use of Js apply() (including code)

About the simple operation of downloading files in js (attached code, detailed answer)

The above is the detailed content of How to use vue.js to implement price formatting (code attached). For more information, please follow other related articles on the PHP Chinese website!