關(guān)于vue?src路徑動(dòng)態(tài)拼接的小知識(shí)
vue src路徑動(dòng)態(tài)拼接
我是新手 今天寫(xiě)vue 的時(shí)候 讓這個(gè)src 給我弄的懵懵 本來(lái)打算弄個(gè)輪播圖加路徑 但是怎么也不顯示
第一種:本地添加
如果需要很多圖片 一直加div就很煩 所有我就把所有圖片寫(xiě)在數(shù)組里面
注意 引入圖片路徑一定要加 require 一定要加 require 一定要加 require
然后我用了mint-ui里面的輪播組件 使用v-for 把圖片路徑循環(huán)出來(lái) 使用v-bind:src動(dòng)態(tài)綁定 后面
后面格式為 :src=“item.url” 不要寫(xiě)成 :src={{item.url}}
這樣就好了
第二種:從接口中獲取圖片的路徑
需要拼接服務(wù)器地址
我通過(guò)接口 獲取了圖片地址 放到了一個(gè) 空的數(shù)組里面
然后循環(huán) 數(shù)組
我的item.pic 就是圖片路徑 光路徑是不行的 需要加上圖片路徑前面需要加上服務(wù)器地址
這時(shí)候注意 一點(diǎn)要加上http 一點(diǎn)要加上http 一點(diǎn)要加上http就是這個(gè)給我折磨了好長(zhǎng)時(shí)間
直接加號(hào)拼接就ok了
如何通過(guò)變量動(dòng)態(tài)拼接url
格式:
<a :href="'index.shtml?other='+object.name">這是一個(gè)動(dòng)態(tài)鏈接</a>
需要注意的是href前要加上冒號(hào),href最外層是雙引號(hào),中間是單引號(hào)。
<div class="tab-content" id="datatable"> <div v-for="(object,index) in items"> <!-格式如下,href前要加上冒號(hào)---> <a :href="'index.shtml?other='+object.name">這是一個(gè)動(dòng)態(tài)鏈接</a> </div> </div>
<script> $(document).ready(function() { App.init(); //數(shù)據(jù)列表 var datatable = new Vue({ el: '#datatable', data: { items: [], }, }); //從服務(wù)端獲取數(shù)據(jù) getList(); function getList() { $.ajax({ url : "/sapi/getcluster", type : "post", dataType : "json", success : function(result){ if(result.status == -1){ window.location.href = result.data; return false; } datatable.items = result.data["XXX"]; } }); } }); </script>
動(dòng)態(tài)拼接結(jié)果為: href=“index.shtml?other=yyy”
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue+OpenLayer為地圖添加風(fēng)場(chǎng)效果
這篇文章主要為大家展示了一個(gè)demo,即利用Vue和OpenLayer在地圖上面添加風(fēng)場(chǎng)效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2022-04-04ant-design-vue table分頁(yè)onShowSizeChange后的pageNo解決
這篇文章主要介紹了ant-design-vue table分頁(yè)onShowSizeChange后的pageNo的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04在vue項(xiàng)目中引入scss并使用scss樣式詳解
SCSS是一種CSS預(yù)處理語(yǔ)言,定義了一種新的專門(mén)的編程語(yǔ)言,編譯后形成正常的css文件,為css增加一些編程特性,這篇文章主要給大家介紹了關(guān)于在vue項(xiàng)目中引入scss并使用scss樣式的相關(guān)資料,需要的朋友可以參考下2022-07-0722個(gè)Vue優(yōu)化技巧(項(xiàng)目實(shí)用)
演示代碼使用 Vue3 + ts + Vite 編寫(xiě),但是也會(huì)列出適用于 Vue2 的優(yōu)化技巧,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09vue的v-if里實(shí)現(xiàn)調(diào)用函數(shù)
這篇文章主要介紹了vue的v-if里實(shí)現(xiàn)調(diào)用函數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07使用Vue2實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能(可直接使用)
這篇文章主要給大家介紹了如何使用Vue2實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能,文中有相關(guān)的代碼示例,對(duì)我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-08-08