vue style width a href动态拼接问题的解决

style width 这个问题 折磨了我一个上午了 好惭愧

因为项目涉及到 进度条 所以必须用行内样式 style

用过vue的都知道 vue中style的用法

大众用法

：style=" { width:30px } "

但是现在涉及到拼接了 直接上代码了

其中list是我data循环的数据 这是一个比例的关系

公开是拼接的时候 一直是报错的 一直出现文本 ‘ } ' = > 类似这些的东西

很显然 是拼接的问题 于是继续拼接 但是还是变着花样地出现这些鬼东西

于是发现 只要把花括号去掉 拼接上%就可以了

虽然浪费了很多时间 但是还是有收获的！

下面的这个是a的href 跳转时候拼接id的

这个没啥好说的 看看图片就差不多理解了 不过我怎么觉得vue的拼接和普通html不一样啊

补充知识：问题：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 style width a href动态拼接问题的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现权限控制路由(vue-router 动态添加路由)

    用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏. 思路如下: 一.定义初始化默认路由. 二.动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配. 三.通过匹配,把匹配好的路由数据addRoutes到路由中. 四.为了防止刷新页面后路由数据被清空,这里用判断是否登录的方式,再次加载动态路由. 具体代码如下: router.js import Vue from 'vue' import {router} from './i

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

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

  • Vue动态获取width的方法

    vue里想用Bootstrap的进度条, <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:

  • vue style width a href动态拼接问题的解决

    style width 这个问题 折磨了我一个上午了 好惭愧 因为项目涉及到 进度条 所以必须用行内样式 style 用过vue的都知道 vue中style的用法 大众用法 :style=" { width:30px } " 但是现在涉及到拼接了 直接上代码了 其中list是我data循环的数据 这是一个比例的关系 公开是拼接的时候 一直是报错的 一直出现文本 ' } ' = > 类似这些的东西 很显然 是拼接的问题 于是继续拼接 但是还是变着花样地出现这些鬼东西 于是发现 只要

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

    如何通过变量动态拼接url? 格式:<a :href="'index.shtml?other='+object.name" rel="external nofollow" rel="external nofollow" >这是一个动态链接</a> 需要注意的是href前要加上冒号,href最外层是双引号,中间是单引号. <div class="tab-content" id="datat

  • 关于vue src路径动态拼接的小知识

    关于vue src路径动态拼接的小知识

    目录 vue src路径动态拼接 第一种:本地添加 第二种:从接口中获取图片的路径 如何通过变量动态拼接url vue src路径动态拼接 我是新手 今天写vue 的时候 让这个src 给我弄的懵懵 本来打算弄个轮播图加路径 但是怎么也不显示 第一种:本地添加 如果需要很多图片 一直加div就很烦 所有我就把所有图片写在数组里面 注意 引入图片路径一定要加 require 一定要加 require 一定要加 require 然后我用了mint-ui里面的轮播组件 使用v-for 把图片路径循环出

  • 关于Vue中img动态拼接src图片地址的问题

    下面看下Vue中img动态拼接:src图片地址,具体内容如下所示: 使用场景:根据后端返回图片标记来匹配本地图片资源 例如:根据后端返回k1标记,前端生成assets/images/inventory/k1.png图片资源路径 <template> <div class="fl"> <img :src="getImgUrl(gatherInfo.img1)" alt=""> <img :src="

  • 基于vue实现一个神奇的动态按钮效果

    今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮 首先我们还是要对vue进行配置,在上篇随笔中有相关下载教学. 然后我们要在html页面上搭建三个简易的按钮,颜色分别为紫,绿和蓝(颜色随意)其代码如下: <body> <div id="app"> <p> <button @click="btn_click('pg1')" :style="{background:'rebeccapurple'}&quo

  • 关于vue中根据用户权限动态添加路由的问题

    关于vue中根据用户权限动态添加路由的问题

    根据用户的权限,展示不同的菜单页. 知识点 路由守卫(使用了前置守卫):根据用户角色判断要添加的路由 vuex:保存动态添加的路由 难点 每次路由发生变化时都需要调用一次路由守卫,并且store中的数据会在每次刷新的时候清空,因此需要判断store中是否有添加的动态路由. (若没有判断 则会一直添加 导致内存溢出) 根据角色判断路由 过滤动态路由 判断每条路由角色是否与登录传入的角色一致 <template> <div> <el-menu :default-active=&q

  • vue+el-upload实现多文件动态上传

    vue+el-upload实现多文件动态上传

    vue+el-upload多文件动态上传,供大家参考,具体内容如下 使用场景 点击[添加/删除],可动态增加/删除行数,并为每行上传附件,附件暂存前端,点击[上传]可以将所有附件和部分名称同时提交后台,实现表格的动态多文件上传.其中el-upload ,相关钩子函数可查看el-upload 官方文档 这里的表格行的新增是在弹框中填完再写入的,也可直接在表格中添加行,然后填写内容(template slot-scope="scope" 注释部分代码),这里仅提供思路 代码html部分 &

  • vue使用计算属性完成动态滑竿条制作

    布局部分: <div id="slider"> <!-- 主要动画效果:字体和进度条以及表情随情绪程度百分比变化 --> <label for="range" :style="{'color':getHappinessColor}">情绪程度: {{val}}%</label> <!-- 滑动杆的颜色应该与预先设置好的颜色进行绑定,颜色可随意更改 --> <!-- 情绪程度的值也应

  • vue中使用echarts实现动态数据绑定以及获取后端接口数据

    vue中使用echarts实现动态数据绑定以及获取后端接口数据

    目录 前言 1.柱状图 2.折线图 3.饼状图 4.地图 总结 前言 之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单来讲,就是从接口获取到的数据,需要在图表的方法里再次定义一下,然后用setOption方法就可以获取到了. 1.柱状图 首先看接口传过来的数据,传过来一个数组,第一条年度2021,数量1,第二条年度2022,数量3 因为柱状图的数

  • 使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

    使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

    一.写在前面 1. Bootstrap是一个由 Twitter 开发和维护的前端框架,目前很受欢迎,Bootstrap中文网点击这里. 2. Vue.js 是一套构建用户界面的渐进式框架,点这里访问官网. 二.实现效果: 三.页面引入bootstrap.vue资源 <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="e

随机推荐