vue style width a href動(dòng)態(tài)拼接問題的解決
style width 這個(gè)問題 折磨了我一個(gè)上午了 好慚愧
因?yàn)轫?xiàng)目涉及到 進(jìn)度條 所以必須用行內(nèi)樣式 style
用過vue的都知道 vue中style的用法
大眾用法
：style=" { width:30px } "
但是現(xiàn)在涉及到拼接了 直接上代碼了
其中l(wèi)ist是我data循環(huán)的數(shù)據(jù) 這是一個(gè)比例的關(guān)系
公開是拼接的時(shí)候 一直是報(bào)錯(cuò)的 一直出現(xiàn)文本 ‘ } ' = > 類似這些的東西
很顯然 是拼接的問題 于是繼續(xù)拼接 但是還是變著花樣地出現(xiàn)這些鬼東西
于是發(fā)現(xiàn) 只要把花括號(hào)去掉 拼接上%就可以了
雖然浪費(fèi)了很多時(shí)間 但是還是有收獲的！
下面的這個(gè)是a的href 跳轉(zhuǎn)時(shí)候拼接id的
這個(gè)沒啥好說的 看看圖片就差不多理解了 不過我怎么覺得vue的拼接和普通html不一樣啊
補(bǔ)充知識(shí)：問題：vue.js a標(biāo)簽href里有變量，函數(shù)拼接問題
正確格式：
<a :href ="'http://search.jd.com/Search?enc=utf-8&keyword='+keyWord+'&page='+Math.ceil(record.skuRank/60)+'.html'">跳轉(zhuǎn)</a>
注意點(diǎn)：
1.href前面要加“：”
2.字符串要用單引號(hào)“ ' ”包住
3.句尾要加“.html”
以上這篇vue style width a href動(dòng)態(tài)拼接問題的解決就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?vue-devtools?調(diào)試工具下載安裝使用教程
vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率，尤其是對(duì)于初學(xué)vue的朋友來說可謂是一大利器，這篇文章主要介紹了Vue3?vue-devtools?調(diào)試工具下載安裝,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue 清空input標(biāo)簽 中file的值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
antd?Vue實(shí)現(xiàn)Login登錄頁面布局案例詳解?附帶驗(yàn)證碼驗(yàn)證功能
這篇文章主要介紹了antd?Vue實(shí)現(xiàn)Login登錄頁面布局案例詳解附帶驗(yàn)證碼驗(yàn)證功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
Vue結(jié)合echarts實(shí)現(xiàn)繪制水滴圖
這篇文章主要為大家詳細(xì)介紹了Vue如何結(jié)合echarts實(shí)現(xiàn)水滴圖的繪制，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-07-07
Vue和relation-graph庫(kù)打造高質(zhì)量的關(guān)系圖應(yīng)用程序
這篇文章主要介紹了Vue和relation-graph庫(kù)打造高質(zhì)量的關(guān)系圖應(yīng)用程序,在這篇文章中,我們深入探討了如何使用Vue和relation-graph高效打造關(guān)系圖,我們?cè)敿?xì)介紹了數(shù)據(jù)準(zhǔn)備、關(guān)系映射、點(diǎn)擊事件等關(guān)鍵步驟,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue.js 動(dòng)態(tài)組件詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
關(guān)于Vue3中element-plus的el-dialog對(duì)話框無法顯示的問題及解決方法
最近今天在寫一個(gè)停車場(chǎng)管理系統(tǒng)的項(xiàng)目時(shí),在用vue3寫前端時(shí),在前端模板選擇上,我一時(shí)腦抽,突然決定放棄SpringBoot,選擇了以前幾乎很少用的element-plus,然后果不其然,錯(cuò)誤連連,下面給大家分享dialog對(duì)話框無法顯示的原因,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了Vue 表單輸入綁定v-model，v-model指定可以實(shí)現(xiàn)表單值與屬性的雙向綁定。即表單元素中更改了值會(huì)自動(dòng)的更新屬性中的值，屬性中的值更新了會(huì)自動(dòng)更新表單中的值 ，下面一起進(jìn)入文章來哦姐文章詳情內(nèi)容2021-10-10
VUE多個(gè)下拉框?qū)崿F(xiàn)雙向聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了VUE多個(gè)下拉框?qū)崿F(xiàn)雙向聯(lián)動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue實(shí)現(xiàn)淘寶購(gòu)物車三級(jí)選中功能詳解
這篇文章主要介紹了通過Vue實(shí)現(xiàn)淘寶購(gòu)物車中三級(jí)選中的功能，文中的實(shí)現(xiàn)過程講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以了解一下2022-01-01