vue2.0はステータス値に応じてスタイルの表示方法を変更します

亚连
リリース: 2018-05-30 15:33:16
オリジナル
2800 人が閲覧しました

今回は、ステータス値に基づいた vue2.0 スタイルの変更表示方法を共有します。これは、良い参考値になっているので、皆さんの参考になれば幸いです。

ユーザーがプロセス操作を実行するとき、それらは通常、進行中、未開始、および完了に分けられ、フロントエンド ページには対応するステータスの区別が表示される必要があります。ここでテストされるのは背景色の区別です。

デモ:

<span class="contract-span" :class="statusText[item.status][0]">{{statusText[item.status][1]}}</span>
ログイン後にコピー

   statusText: {
    0: [&#39;span-delay&#39;, &#39;进行中&#39;],
    1: [&#39;span-finish&#39;, &#39;已完成&#39;],
    2: [&#39;span-rough&#39;, &#39;未开始&#39;],
   },//显示状态
ログイン後にコピー

ループトラバーサル中にステータス値を割り当てることにより、異なる状態で異なる背景色を表示できます。

上記は私があなたのためにまとめたものです。

関連記事:

vueで実装した画像をデータベースにアップロードしてページに表示する機能の例

vue.jsルーティング使用後に失敗する問題を解決する

やり方js のデータを完全に解析します

以上がvue2.0はステータス値に応じてスタイルの表示方法を変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!