使用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中的數(shù)據(jù)雙向綁定問題，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了vue 公共列表選擇組件,引用Vant-UI的樣式方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
之前對于vue中用到過的checkbox也只是別人寫好的組件，這次在自己實現(xiàn)時走了很多坑，特意寫這篇文章記錄到腳本之家平臺，供大家參考2018-11-11
今天小編就為大家分享一篇關(guān)于vue中子組件傳遞數(shù)據(jù)給父組件的講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要為大家詳細介紹了vue用BMap百度地圖實現(xiàn)即時搜索功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
解決vue項目Error:Cannot find module‘xxx’類報錯問題
當(dāng)npm運行報錯Error:Cannot find module 'xxx'時,通常是因為node_modules文件或依賴未正確安裝,解決步驟包括刪除node_modules和package-lock.json文件,重新運行npm install,并根據(jù)需要安裝額外插件,若網(wǎng)絡(luò)問題導(dǎo)致安裝失敗2024-10-10
詳解vue-template-admin三級路由無法緩存的解決方案
這篇文章主要介紹了vue-template-admin三級路由無法緩存的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
跨域，跨的是不同域，也就是協(xié)議或主機或或端口號不同造成的現(xiàn)象，本文給大家分享vue3解決跨域問題詳細代碼親測有效，感興趣的朋友跟隨小編一起看看吧2022-11-11
詳解如何在 vue 項目里正確地引用 jquery 和 jquery-ui的插件
本篇文章主要介紹了詳解如何在 vue 項目里正確地引用 jquery 和 jquery-ui的插件，具有一定的參考價值，有興趣的可以了解一下2017-06-06
vue3+TypeScript+vue-router的使用方法
本文詳細講解了vue3+TypeScript+vue-router的使用方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01