vue style width a href動(dòng)態(tài)拼接問(wèn)題的解決
style width 這個(gè)問(wèn)題 折磨了我一個(gè)上午了 好慚愧
因?yàn)轫?xiàng)目涉及到 進(jìn)度條 所以必須用行內(nèi)樣式 style
用過(guò)vue的都知道 vue中style的用法
大眾用法
：style=" { width:30px } "
但是現(xiàn)在涉及到拼接了 直接上代碼了
其中l(wèi)ist是我data循環(huán)的數(shù)據(jù) 這是一個(gè)比例的關(guān)系
公開(kāi)是拼接的時(shí)候 一直是報(bào)錯(cuò)的 一直出現(xiàn)文本 ‘ } ' = > 類似這些的東西
很顯然 是拼接的問(wèn)題 于是繼續(xù)拼接 但是還是變著花樣地出現(xiàn)這些鬼東西
于是發(fā)現(xiàn) 只要把花括號(hào)去掉 拼接上%就可以了
雖然浪費(fèi)了很多時(shí)間 但是還是有收獲的！
下面的這個(gè)是a的href 跳轉(zhuǎn)時(shí)候拼接id的
這個(gè)沒(méi)啥好說(shuō)的 看看圖片就差不多理解了 不過(guò)我怎么覺(jué)得vue的拼接和普通html不一樣啊
補(bǔ)充知識(shí)：問(wèn)題：vue.js a標(biāo)簽href里有變量，函數(shù)拼接問(wèn)題
正確格式：
<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)拼接問(wèn)題的解決就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
最近需要在項(xiàng)目中使用地圖顯示點(diǎn)位信息,所以引入了騰訊地圖,這篇文章主要給大家介紹了關(guān)于Vue引入騰訊地圖(搜索獲取定位)的相關(guān)資料,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue中如何獲取當(dāng)前路由name，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue 彈窗時(shí) 監(jiān)聽(tīng)手機(jī)返回鍵關(guān)閉彈窗功能(頁(yè)面不跳轉(zhuǎn))
這篇文章主要介紹了vue 彈窗時(shí) 監(jiān)聽(tīng)手機(jī)返回鍵關(guān)閉彈窗功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值(頁(yè)面不跳轉(zhuǎn)) ,需要的朋友可以參考下2019-05-05
Vue公共loading升級(jí)版解決思路(處理并發(fā)異步差時(shí)響應(yīng))
這篇文章主要介紹了Vue公共loading升級(jí)版（處理并發(fā)異步差時(shí)響應(yīng)）,解決思路是通過(guò)定義一個(gè)全局對(duì)象來(lái)存儲(chǔ)每個(gè)接口的響應(yīng)狀態(tài)，直到每個(gè)請(qǐng)求接口都收到響應(yīng)才變更狀態(tài)，結(jié)束loading動(dòng)畫(huà)，需要的朋友可以參考下2023-11-11
vue框架下部署上線后刷新報(bào)404問(wèn)題的解決方案(推薦)
這篇文章主要介紹了vue框架下部署上線后刷新報(bào)404問(wèn)題解決方案,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
本篇文章主要介紹了Vue的百度地圖插件嘗試使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
axios全局注冊(cè),設(shè)置token,以及全局設(shè)置url請(qǐng)求網(wǎng)段的方法
今天小編就為大家分享一篇axios全局注冊(cè),設(shè)置token,以及全局設(shè)置url請(qǐng)求網(wǎng)段的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Element樹(shù)形控件el-tree懶加載并設(shè)置默認(rèn)展開(kāi)和選中的效果
本文主要介紹了Element樹(shù)形控件el-tree懶加載并設(shè)置默認(rèn)展開(kāi)和選中的效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
在vue和element-ui的table中實(shí)現(xiàn)分頁(yè)復(fù)選功能
這篇文章主要介紹了在vue和element-ui的table中實(shí)現(xiàn)分頁(yè)復(fù)選功能，本文代碼結(jié)合圖文的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
element-plus的el-table自定義表頭篩選查詢功能實(shí)現(xiàn)
這篇文章主要介紹了element-plus的el-table自定義表頭篩選查詢功能實(shí)現(xiàn),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07