使用vue实现通过变量动态拼接url


Posted in Javascript onJuly 22, 2020

如何通过变量动态拼接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就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript奇异的arguments分析
Oct 20 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
详解Vue之计算属性
Jun 20 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 #Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 #Javascript
vue props 一次传多个值实例
Jul 22 #Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 #Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 #Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 #Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 #Javascript
You might like
如何写php程序?
2006/12/08 PHP
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
专科应届生求职信
2013/11/24 职场文书
财政局个人总结
2015/03/04 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis