Vue.js dynamically assigns value to img's src

Now I will share with you a Vue.js method to dynamically assign the src value of img. It has a good reference value and I hope it will be helpful to everyone.

The requirements are as follows:

ajax gets the data as follows

{
 "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"
}

Then render the list to the page. If it is male, set the src of img to "images/male.png", otherwise set it to "images/female.png"

Both It can be achieved. In order to make it look more comfortable in HTML, it is better to use filter. Although it is just a judgment logic, adding the url to the judgment statement will not look good. Of course, this is just a personal habit. It is intuitive to use instructions directly

<img  v-attr="src: sex==&#39;male&#39;?&#39;images/male.png&#39;:&#39;images/female.png&#39;" alt="Vue.js dynamically assigns value to img's src" >
<img  v-attr="src: sex | isM" alt="Vue.js dynamically assigns value to img's src" >

Corresponding filter

filters: {
   isM: function (val) {
     return val == 'male' ? 'images/male.png' : 'images/female.pn'
   }
  }

method There are many, so I will write down what I recommend:

First of all, male and female markings are decorative content, and I recommend writing them in css. In other words, use the form of background images to control real men and women

In this way you have two classes.male female

<span class={{sex}}></span>

The above is what I compiled For everyone, I hope it will be helpful to everyone in the future.

Related articles:

Using axios method in vue component

axios post submission formdata instance

Basic knowledge and working principles of vue-router

The above is the detailed content of Vue.js dynamically assigns value to img's src. For more information, please follow other related articles on the PHP Chinese website!