ホームページ  >  記事  >  ウェブフロントエンド  >  vue.js を使用して価格の書式設定を実装する方法 (コードが添付されています)

vue.js を使用して価格の書式設定を実装する方法 (コードが添付されています)

亚连
亚连オリジナル
2018-05-18 13:50:292384ブラウズ

以下は私がコンパイルした価格フォーマットの vue.js 実装です。興味のある学生はご覧ください。

ここでは、電子商取引の価格処理で非常に実用的な一般的に使用される価格書式設定方法を共有します

vue.js を使用して価格の書式設定を実装する方法 (コードが添付されています)

ここでは、このフィルターを通して価格データに フィルター を使用します。 、価格は小数点以下を保持するように処理されます。

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;;
}
}

上記は、私があなたのためにコンパイルした vue.js の価格フォーマットです。将来役立つことを願っています。

関連記事: 双方向データバインディングを実現する

jsネイティブコード(直接使用可能、カプセル化済み)

Js apply()の使い方を詳しく解説(コード含む)

About js ファイルをダウンロードする簡単な操作 (コードが添付されており、詳細な回答)

以上がvue.js を使用して価格の書式設定を実装する方法 (コードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。