使用vue实现通过变量动态拼接url
更新时间：2020年07月22日 15:25:25 作者：做一只会飞的象
这篇文章主要介绍了使用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就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中实现图片压缩 file文件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
这篇文章主要为大家介绍了vue3使用el-upload上传文件实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了vue-cli webpack 快速搭建项目的教程详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
这篇文章主要给大家介绍了关于vue中点击下载图片的实现方法,在Vue的模板中,我们可以将下载属性绑定至或元素上,用来实现点击下载,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了在Vue3中如何为路由Query参数标注类型,我们就针对这个话题如何为路由Query参数标注类型为例,看看Composable和IOC容器的代码风格究竟有什么不同,需要的朋友可以参考下2024-08-08
本文主要介绍了Vue3+axios+Mock.js实现登录功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了Element--el-tabs固定在顶部问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
在写vue项目时想到一个问题,项目里面的文件都是一个个的组件,如何在控制台中修改,查看组件data里的值呢,下面这篇文章主要给大家介绍了关于Vue如何通过浏览器控制台查看全局data值的相关资料,需要的朋友可以参考下2023-04-04
要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
今天小编就为大家分享一篇初学vue出现空格警告的原因及其解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
最新评论