vue图片标签 img 动态绑定src

这里用的 iview  vue UI 组件:
<Row :gutter="30">
  <Col :xs="12" :md="8" :lg="6" v-for="item in list">
    <div class="redeem-gift-box">
      <div class="redeem-gift-img-wrap">
        <div class="redeem-gift-img">
          <img class="" data-img="1" source-data-lazy-img="" data-lazy-img="done"
              :src="item.giftImgPath">
          <!--https://everbest.oss-cn-beijing.aliyuncs.com/oneblog/20190807181135719.jpg-->
        </div>
      </div>
      <div class="flex-center" style="height:40px;overflow: hidden">
        <div class="redeem-gift-name">
          {{item.giftName}}
        </div>
      </div>
      <div class="redeem-gift-info clearfix padding-5">
        <div class="fl"><span class="redeem-gift-score">{{item.giftScore||0}}</span>积分</div>
        <div class="fr">库存：<span class="redeem-gift-sum">{{item.goodNum||0}}</span></div>
      </div>
      <div class="text-center">
        <i-button style="max-width:90%" type="primary" long round @click="openModal(item)">立即兑换</i-button>
      </div>
    </div>
  </Col>
</Row>

 

注意:  src 前面  需要加 上  ":"     --> img  :src

“:” 是指令 “v-bind”的缩写，“@”是指令“v-on”的缩写；“.”是修饰符。

v-bind 指令可以用于响应式地更新 HTML 特性：

v-on 指令，它用于监听 DOM 事件：

. 修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

 

参考vue 官方文档: https://cn.vuejs.org/v2/guide/syntax.html#%E5%8F%82%E6%95%B0