Vue.js は img の src に値を動的に割り当てます

ここで、src 値を img に動的に割り当てる Vue.js メソッドを共有します。これは優れた参照値なので、皆さんのお役に立てれば幸いです。

要件は次のとおりです:

ajaxは次のようにデータを取得します

{
 "code": "200",
 "data": {
  "SumAmount": 200,
  "List": [{
   "amount": 100,
   "sex": "male",
   "fee": 1,
   "id": 98,
   "status": 2,
   "time": "2015-08-11"
  }, {
   "amount": 100,
   "sex": "female",
   "fee": 0,
   "id": 8,
   "status": 2,
   "time": "2015-06-12"
  }]
 },
 "msg": "success"
}

次に、リストをページにレンダリングします。それが男性の場合、imgのsrcを「images」に設定します。 /male.png」、そうでない場合は「images/ Female.png」に設定してください

両方とも実現できます。HTMLでより快適に見せるために、フィルタを使用してください。単なる判定ロジックですが、判定にURLを追加しますもちろん、これは個人的な習慣です。対応するフィルターを理解するには、コマンドを直接使用してください

。

まず、男性と女性はこんな感じです マークは装飾的な内容ですので、CSSで記述することをお勧めします。つまり、背景画像の形式を使用して、現実の男性と女性を制御します

このように、男性と女性の2つのクラスができます

以上が皆さんに向けてまとめたものです。将来すべての人に役立ちます。

関連記事:

vueコンポーネントでのaxiosの使い方

axios投稿フォームデータ例

vue-router関連の基礎知識と動作原理

以上がVue.js は img の src に値を動的に割り当てますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。