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

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

亚连
リリース: 2018-05-18 13:50:29
オリジナル
2438 人が閲覧しました

以下は私がコンパイルした価格フォーマットの 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート