ここで、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 サイトの他の関連記事を参照してください。