使用vue實(shí)現(xiàn)通過(guò)變量動(dòng)態(tài)拼接url
如何通過(guò)變量動(dòng)態(tài)拼接url？
格式：<a :href="'index.shtml?other='+object.name" rel="external nofollow" rel="external nofollow" >這是一個(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" rel="external nofollow" rel="external nofollow" >這是一個(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”
補(bǔ)充知識(shí)：vue全局變量apiurl
1、定義
在main.js里面定義
Vue.prototype.$apiUrl = " http://xxxxxxxxxx";
2、使用
在聯(lián)調(diào)的時(shí)候
url: this.$apiUrl + "/xxxx（端口）"
以上這篇使用vue實(shí)現(xiàn)通過(guò)變量動(dòng)態(tài)拼接url就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中的數(shù)據(jù)雙向綁定問(wèn)題，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了vue 公共列表選擇組件,引用Vant-UI的樣式方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
之前對(duì)于vue中用到過(guò)的checkbox也只是別人寫好的組件，這次在自己實(shí)現(xiàn)時(shí)走了很多坑，特意寫這篇文章記錄到腳本之家平臺(tái)，供大家參考2018-11-11
今天小編就為大家分享一篇關(guān)于vue中子組件傳遞數(shù)據(jù)給父組件的講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
vue用BMap百度地圖實(shí)現(xiàn)即時(shí)搜索功能
這篇文章主要為大家詳細(xì)介紹了vue用BMap百度地圖實(shí)現(xiàn)即時(shí)搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
解決vue項(xiàng)目Error:Cannot find module‘xxx’類報(bào)錯(cuò)問(wèn)題
當(dāng)npm運(yùn)行報(bào)錯(cuò)Error:Cannot find module 'xxx'時(shí),通常是因?yàn)閚ode_modules文件或依賴未正確安裝,解決步驟包括刪除node_modules和package-lock.json文件,重新運(yùn)行npm install,并根據(jù)需要安裝額外插件,若網(wǎng)絡(luò)問(wèn)題導(dǎo)致安裝失敗2024-10-10
詳解vue-template-admin三級(jí)路由無(wú)法緩存的解決方案
這篇文章主要介紹了vue-template-admin三級(jí)路由無(wú)法緩存的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue3解決跨域問(wèn)題詳細(xì)代碼親測(cè)有效
跨域，跨的是不同域，也就是協(xié)議或主機(jī)或或端口號(hào)不同造成的現(xiàn)象，本文給大家分享vue3解決跨域問(wèn)題詳細(xì)代碼親測(cè)有效，感興趣的朋友跟隨小編一起看看吧2022-11-11
詳解如何在 vue 項(xiàng)目里正確地引用 jquery 和 jquery-ui的插件
本篇文章主要介紹了詳解如何在 vue 項(xiàng)目里正確地引用 jquery 和 jquery-ui的插件，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
vue3+TypeScript+vue-router的使用方法
本文詳細(xì)講解了vue3+TypeScript+vue-router的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01