1.问题:使用v-for的时候,大家会迭代list,有时候不是单纯的显示出来,而是会在url里强制解析,{{item.url}}这样的写法就行不通了,如何写呢?
2.返回数据格式如下:
{id: 1, url: “bg.png”, year: “2017”, month: “3”, des: null, createTime: null}
{id: 2, url: “bg2.png”, year: “2017”, month: “3”, des: null, createTime: null}
{id: 3, url: “lock.png”, year: “2017”, month: “3”, des: null, createTime: null}

3.vue获取数据方式:

    <script>
        var datas;
        var url="http://loca.3w.dkys.org/ssm01/imageInfo/findAll.action";
        $.ajax({ 
                type : "post", 
                url : url, 
//              data : shopparams, 
                async : false, 
                success : function(data){ 
                    datas=data;
                    console.log(data)
                 } 
            }); 
        new Vue({
          el: '#app',
          data: datas
        })
    </script>
页面如下
<li v-for="item in datas" class="mui-table-view-cell mui-media mui-col-xs-6">
    <a href="#">
    <img class="mui-media-object"     :src="'http://loca.3w.dkys.org/ssm01/images/'+item.url" data-preview-src="" data-preview-group="1">
        <div class="mui-media-body">静静看这世界
        </div>
     </a>
</li>

4.总结:分三步走完整解析
1.把src改为:src
2.把url拆分为两部分,非强制解析的地方就用单引号’ ‘;
3.注意item.url不带括号了

Logo

前往低代码交流专区

更多推荐