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

切版网专注网页切版服务


在最近的一个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前端外包,欢迎来询,和技术交流。

 
免费索取报价