这里用的 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