How to assign value to src attribute using v-for

This time I will show you how to use v-for to assign a value to the src attribute, and what are the precautions for using v-for to assign a value to the src attribute. The following is a practical case. Let’s take a look.

My code structure is as shown in the code below, which cannot be executed. The mustache notation cannot be used in the src attribute in img

<p id="test">
  <p v-for="item in lists">
    <img src="{{item.img}}">
  </p>
</p>

new Vue({
  el: "#test",
  data: function () {
    return {
      lists: [
        { img : 'img1' },
        { img : 'img2' },
        { img : 'img3' },
        { img : 'img4' }        
      ]
    }
  },
})

Later I changed the code in the html to the following

<p id="test">
  <p v-for="item in lists">
    <img v-bind:src="item.img">
  </p>
</p>

After using the v-bind tag, you can use it normally

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed graphic explanation of Vue.directive()

The order of operating Vue rendering and plug-in loading

The above is the detailed content of How to assign value to src attribute using v-for. For more information, please follow other related articles on the PHP Chinese website!