学习vue的弯弯绕绕之v-for循环输出图片

来源:互联网 发布:微信公众号 java开源 编辑:程序博客网 时间:2024/06/07 22:47

一个正常的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">
原创粉丝点击