1. 程式人生 > 程式設計 >使用vue實現通過變數動態拼接url

使用vue實現通過變數動態拼接url

如何通過變數動態拼接url?

格式:<a :href="'index.shtml?other='+object.name" rel="external nofollow" rel="external nofollow" >這是一個動態連結</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" >這是一個動態連結</a>
	</div>
</div>
<script>
  $(document).ready(function() {
    App.init();
    //資料列表
    var datatable = new Vue({
      el: '#datatable',data: {
        items: [],},});
    //從服務端獲取資料
    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>

動態拼接結果為:

href=“index.shtml?other=yyy”

補充知識:vue全域性變數apiurl

1、定義

在main.js裡面定義

Vue.prototype.$apiUrl = " http://xxxxxxxxxx";

2、使用

在聯調的時候

url: this.$apiUrl + "/xxxx(埠)"

以上這篇使用vue實現通過變數動態拼接url就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。