解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题

如下所示：

let name = 'www.baidu.com/'

<a :href="name" rel="external nofollow" >

点击跳转到：

localhost:8080/www.baidu.com/

解决：

写成<a :href="'https//:'+name" rel="external nofollow" >

补充知识：问题：vue.js a标签href里有变量，函数拼接问题

正确格式：

<a :href ="'http://search.jd.com/Search?enc=utf-8&keyword='+keyWord+'&page='+Math.ceil(record.skuRank/60)+'.html'">跳转</a>

注意点：

1.href前面要加“：”

2.字符串要用单引号“ ' ”包住

3.句尾要加“.html”

以上这篇解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue从一个页面跳转到另一个页面并携带参数的解决方法

    1.需求: 点击商场跳转到商业体列表 解决方案: 元页面: a标签中添加跳转函数 <a class="orderBtn1 sIRicon2" href="javascript:void(0);" rel="external nofollow" @click="toMallInfo('M000989')"><i class="sIRicon"></i>商场</a>

  • Vue 中 a标签上href无法跳转的解决方式

    问题: 使用vue-router 在IE下 a标签里的路由不跳转,火狐,chrome工作正常. 解决: 在App.vue 里增加判断IE浏览器手动修复-- export default { name: 'App', mounted(){ function checkIE(){ return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.s

  • vue.js 实现a标签href里添加参数

    源代码 列表可以正常显示,但是连接没有实现对items.orderNo的值转化, 最中解决方法 此处的将a的标签href实现绑定:href 同时对路径进一步转化拼接 以上这篇vue.js 实现a标签href里添加参数就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • 解决Vue router-link绑定事件不生效的问题

    解决方法:加native <router-link to="/date" @click.native="nav_click">最新</router-link> methods: { nav_click: function() { console.log(1) } } 解释: 1: 因为它是自定义标签,根本就没有事件和方法,所以不触发,加个native 就是告诉vue 这个标签现在有主了 它是H5标签 可以加事件了. 2:父组件要想在子组件监听

  • 解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题

    如下所示: let name = 'www.baidu.com/' <a :href="name" rel="external nofollow" > 点击跳转到: localhost:8080/www.baidu.com/ 解决: 写成<a :href="'https//:'+name" rel="external nofollow" > 补充知识:问题:vue.js a标签href里有变量,函数拼接

  • Vue中Video标签播放解析后短视频去水印无响应解决

    Vue中Video标签播放解析后短视频去水印无响应解决

    目录 问题: 情景复现: 链接在Video标签打不开 链接浏览器正常打开 出现的原理 解决方式 前端解决 全局添加标签 Vue单页面添加标签 完美解决: 问题: 发送Ajax请求,请求后端接口解析抖音无水印视频并且展示在页面中,后端已经可以把解析后的访问地址返回,通过浏览器访问该地址也是没有问题的,接着我通过Vue的绑点video的src,预期状态应该是可以被播放的,实际上点击也没反应,查看页面代码也发现video的src已经设置了正确的视频url 情景复现: 前端发送请求到后端接口 我们前端打

  • 解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

    bus总线是vue中路由跳转传递数据的常用方法,适用于传递数据不多的情况,但是在使用的过程中发现,bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据.检查bus的配置以及调用方法,均没有出错,错就错在没有理解Vue的生命周期!!! 我们知道bus的$on的监听应该位于$emit之前,如果在emit之前没有创建监听事件,那么肯定是得不到需要的数据.因此,我通过两个页面来了解路由跳转时两个页面的生命周期,下面给出其中一个页面的部分代码: //页面1 beforeCreate () {

  • 解决vue里碰到 $refs 的问题的方法

    解决vue里碰到 $refs 的问题的方法

    本篇文章介绍了vue里碰到 $refs 的问题,分享给大家,希望能帮助大家解决问题 记录困惑自己一个简单的问题...(瞬间感觉官方文档的强大) 在自己做的一个项目中,遇到一个列表页,根据id能进入详情页(动态匹配路由),详情页是单独的一个组件,在这个详情的组件里,我想获取内容给你区域的高度,以此来判断对底部按钮显示的位置,但是在ref的时候,就是获取不到该标签,在mounted钩子函数里打印 this.$refs,也能看到这个值,但就就是点不出来(this.$refs这个对象里这个值,但是就是获

  • 解决vue的component标签渲染问题

    解决vue的component标签渲染问题

    目录 component标签渲染问题 vue如何识别import对象和require对象 component组件嵌套,导致页面重复渲染,重复请求的bug 错误代码 正确代码 component标签渲染问题 最近遇到一个问题,就是通过LoadJs方法加载的组件怎么通过component实现热加载问题 vue的component标签是个虚拟dom,在真实dom树上需要vue进行渲染,显示.而我最近遇到的问题,我通过LoadJS方法,从A项目读取B项目的对象,页面并已组件的形式渲染到A项目页面上,组件

  • Vue.js实战之利用vue-router实现跳转页面

    Vue.js实战之利用vue-router实现跳转页面

    前言 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果: 项目结构: 一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D

  • 解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

    这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除. 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性,所有明显不支持. 解决思路(从el-select 的角度来考虑,其他组件组合的情况暂不考虑) 想要实现某些选项是不删除,1.需要tag 不可删除,2.options 不可选择 options 不可选择很好实现,只需要给一个disabled属性.tag 不可删除才是关键.下面是我

  • vue.js在标签属性中插入变量参数的方法

    html的标签的属性,比如id.class.href需要动态传递参数,拼接字符串,查了一些资料,并没有找到合适的解决方法,琢磨了一上午,终于试出了方法: v-bind:属性=" '字符串'+自定义变量名",自己试了没问题,有需要的朋友可以借鉴下! 最后需要注意一下属性一定是":属性="这种形式才会起作用 <ul class="menu" v-for="(item,index) in 4"> <li :clas

  • 解决vue的变量在settimeout内部效果失效的问题

    解决方法如下: 1.定义一个self暂存this 2.再改变变量的值,则生效啦 var self=this; this.toastrVal = inVal; this.loadState = true; this.noBg = bgState; setTimeout(function () { self.loadState = false; }, 3000) 拓展知识:解决vue在setTimeout内修改this失效的问题 当在vue中使用定时器来修改一个变量值的时候,发现没有效果,这是由于s

随机推荐