使用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中的数据双向绑定问题，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了vue 公共列表选择组件,引用Vant-UI的样式方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
之前对于vue中用到过的checkbox也只是别人写好的组件，这次在自己实现时走了很多坑，特意写这篇文章记录到脚本之家平台，供大家参考2018-11-11
今天小编就为大家分享一篇关于vue中子组件传递数据给父组件的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要为大家详细介绍了vue用BMap百度地图实现即时搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
解决vue项目Error:Cannot find module‘xxx’类报错问题
当npm运行报错Error:Cannot find module 'xxx'时,通常是因为node_modules文件或依赖未正确安装,解决步骤包括删除node_modules和package-lock.json文件,重新运行npm install,并根据需要安装额外插件,若网络问题导致安装失败2024-10-10
详解vue-template-admin三级路由无法缓存的解决方案
这篇文章主要介绍了vue-template-admin三级路由无法缓存的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
跨域，跨的是不同域，也就是协议或主机或或端口号不同造成的现象，本文给大家分享vue3解决跨域问题详细代码亲测有效，感兴趣的朋友跟随小编一起看看吧2022-11-11
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件，具有一定的参考价值，有兴趣的可以了解一下2017-06-06
vue3+TypeScript+vue-router的使用方法
本文详细讲解了vue3+TypeScript+vue-router的使用方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
最新评论