切版网（2013~2023）

http://qieban.cn
做完设计，找切版网
QQ:6135833
微信：dingxiangming82

2017年12月21日

vue循环v-for图片问题解决

本文就“vue循环v-for图片问题解决”展开讨论，作者切版网，发布于2017年12月21日 全文共627个字，预计阅读时长2分5秒。

在最近的一个h5手机前端外包项目中，需要用到vue，于是碰到了这个问题，通过vue的v-for循环数据的时候，不能正常的输出图片，一般正常的是这样的

<div id="app">
  <template>
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="data in list">
        {{data.src}}
      </el-carousel-item>
    </el-carousel>
  </template>
</div>
var oVue = new Vue({
         el : '#app',  
         data : {  
          list : [
            {src:'http://www.caiqi.com/upload/image/19/2017-06-07/2017060711393060.jpg' },
            {src:'http://www.caiqi.com/upload/image/19/2017-06-07/2017060711393060.jpg'},
            {src: '../static/images/B1.jpg'},
            {src: '../static/images/B3.jpg'}
          ]
        }
      }); 

但是，如果你要循环图片的时候，切不可按部就班，写成这样

<img src="{{data.src}}">

而是，应该写成这样

<img v-bind:src="data.src">


然后，问题解决，所写出来为后面的人提供便利，切版专注web前端外包，欢迎来询，和技术交流。

文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。