使用vue實現(xiàn)通過變量動態(tài)拼接url
更新時間：2020年07月22日 15:25:25 作者：做一只會飛的象
這篇文章主要介紹了使用vue實現(xiàn)通過變量動態(tài)拼接url，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如何通過變量動態(tài)拼接url？
格式：<a :href="'index.shtml?other='+object.name" rel="external nofollow" rel="external nofollow" >這是一個動態(tài)鏈接</a>
需要注意的是href前要加上冒號，href最外層是雙引號，中間是單引號。
<div class="tab-content" id="datatable">
<div v-for="(object,index) in items">
<!-格式如下，href前要加上冒號--->
<a :href="'index.shtml?other='+object.name" rel="external nofollow" rel="external nofollow" >這是一個動態(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>
動態(tài)拼接結(jié)果為：
href=“index.shtml?other=yyy”
補充知識：vue全局變量apiurl
1、定義
在main.js里面定義
Vue.prototype.$apiUrl = " http://xxxxxxxxxx";
2、使用
在聯(lián)調(diào)的時候
url: this.$apiUrl + "/xxxx（端口）"
以上這篇使用vue實現(xiàn)通過變量動態(tài)拼接url就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中實現(xiàn)圖片壓縮 file文件的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家介紹了vue3使用el-upload上傳文件實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了vue-cli webpack 快速搭建項目的教程詳解，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
這篇文章主要給大家介紹了關(guān)于vue中點擊下載圖片的實現(xiàn)方法,在Vue的模板中,我們可以將下載屬性綁定至或元素上,用來實現(xiàn)點擊下載,需要的朋友可以參考下2023-08-08
在Vue3中為路由Query參數(shù)標(biāo)注類型的方法
這篇文章主要介紹了在Vue3中如何為路由Query參數(shù)標(biāo)注類型,我們就針對這個話題如何為路由Query參數(shù)標(biāo)注類型為例,看看Composable和IOC容器的代碼風(fēng)格究竟有什么不同,需要的朋友可以參考下2024-08-08
Vue3+axios+Mock.js實現(xiàn)登錄功能的示例代碼
本文主要介紹了Vue3+axios+Mock.js實現(xiàn)登錄功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了Element--el-tabs固定在頂部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
在寫vue項目時想到一個問題,項目里面的文件都是一個個的組件,如何在控制臺中修改,查看組件data里的值呢,下面這篇文章主要給大家介紹了關(guān)于Vue如何通過瀏覽器控制臺查看全局data值的相關(guān)資料,需要的朋友可以參考下2023-04-04
要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標(biāo)簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問題，就是本篇要探討的主要問題，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
初學(xué)vue出現(xiàn)空格警告的原因及其解決方案
今天小編就為大家分享一篇初學(xué)vue出現(xiàn)空格警告的原因及其解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10