字符串里解析vue表达式
生活随笔
收集整理的這篇文章主要介紹了
字符串里解析vue表达式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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不帶括號了
總結
以上是生活随笔為你收集整理的字符串里解析vue表达式的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 《leetcode》remove-dup
- 下一篇: springboot-vue简单小项目搭