Vue如何在CSS中使用data定義的數(shù)據(jù)淺析
1、考慮一個(gè)問題, 后端傳來一個(gè)數(shù)據(jù), 比如是某個(gè)百分比, 需要在頁面做進(jìn)度展示. 一般的情況都會在 CSS 中設(shè)置數(shù)據(jù)展示, 但是 CSS 中如何獲取到后端傳來的數(shù)據(jù)呢?
2、使用自定義屬性: data-
通過 v-bind 將后端的數(shù)據(jù)綁定在自定義 HTML 屬性上, 然后通過 CSS 的 attr() 函數(shù)獲取該屬性
<template>
<div>
<div class="box"
:data-content="obj.desc"
:data-percent="obj.percent"></div>
</div>
</template>
<script>
export default {
data() {
return {
obj: {
percent: '30%',
desc: '哈哈哈哈哈哈'
}
}
},
}
</script>
<style>
.box {
width: 400px;
height: 200px;
border: 1px solid salmon;
position: relative;
}
.box::before, .box::after {
position: absolute;
top: 0; bottom: 0;
}
.box::before {
content: attr(data-content);
left: 0;
right: calc(100% - attr(data-percent));
background-color: deepskyblue;
}
.box::after {
content: attr(data-content);
right: 0;
left: attr(data-percent);
background-color: deeppink;
}
</style>最后頁面展示
??計(jì)算 right 部分失效了, 原因是 attr() 函數(shù)不能在 calc() 中使用! 怎么辦呢?
3、自定義 CSS 變量
通過在 HTML 的 style 屬性以 v-bind 的形式綁定定義的 CSS 變量, 繼而在 CSS 中使用該變量達(dá)到效果
<template>
<div>
<div class="box"
:style="{'--percent': obj.percent}"
:data-content="obj.desc"
:data-percent="obj.percent"></div>
</div>
</template>
<style>
.box {
width: 400px;
height: 200px;
border: 1px solid salmon;
position: relative;
}
.box::before, .box::after {
position: absolute;
top: 0; bottom: 0;
}
.box::before {
content: attr(data-content);
left: 0;
/* right: calc(100% - attr(data-percent)); */
right: calc(100% - var(--percent));
background-color: deepskyblue;
}
.box::after {
content: attr(data-content);
right: 0;
/* left: attr(data-percent); */
left: var(--percent);
background-color: deeppink;
}
</style>上面的代碼省略了 <script> 標(biāo)簽部分, 因?yàn)檫@部分沒有改動
總結(jié)
到此這篇關(guān)于Vue如何在CSS中使用data定義的數(shù)據(jù)的文章就介紹到這了,更多相關(guān)Vue在CSS使用data的數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue-Element-Admin集成自己的接口實(shí)現(xiàn)登錄跳轉(zhuǎn)
關(guān)于這個(gè)Vue-element-admin中的流程可能對于新的同學(xué)不是很友好，所以本文將結(jié)合實(shí)例代碼，介紹Vue-Element-Admin集成自己的接口實(shí)現(xiàn)登錄跳轉(zhuǎn)，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)物流時(shí)間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue2實(shí)現(xiàn)可復(fù)用的輪播圖carousel組件詳解
這篇文章主要為大家詳細(xì)介紹了vue2實(shí)現(xiàn)可復(fù)用的輪播圖carousel組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue和iview結(jié)合動態(tài)生成表單實(shí)例
這篇文章主要介紹了vue和iview結(jié)合動態(tài)生成表單實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue處理循環(huán)數(shù)據(jù)流程示例精講
這篇文章主要介紹了Vue處理循環(huán)數(shù)據(jù)流程，這個(gè)又是一個(gè)編程語言，?模版語法里面必不可少的一個(gè)，?也是使用業(yè)務(wù)場景使用最多的一個(gè)環(huán)節(jié)。所以學(xué)會使用循環(huán)也是重中之重了2023-04-04
vue-cli4創(chuàng)建項(xiàng)目導(dǎo)入Element-UI踩過的坑及解決
這篇文章主要介紹了vue-cli4創(chuàng)建項(xiàng)目導(dǎo)入Element-UI踩過的坑及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了vue3.0中setup的兩個(gè)注意點(diǎn)，本文通過兩種用法給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能
這篇文章主要介紹了vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
el-date-picker默認(rèn)結(jié)束為當(dāng)前時(shí)分秒的操作方法
在element?ui中的日期時(shí)間選擇組件中默認(rèn)是00:00,現(xiàn)在需求是點(diǎn)擊默認(rèn)結(jié)束時(shí)間為當(dāng)前時(shí)分秒,查了很多資料寫的都不準(zhǔn)確?,今天給大家分享el-date-picker默認(rèn)結(jié)束為當(dāng)前時(shí)分秒的操作方法,感興趣的朋友一起看看吧2024-01-01
vue3+ts實(shí)現(xiàn)一個(gè)表單組件的詳細(xì)代碼
這篇文章主要介紹了vue3+ts實(shí)現(xiàn)一個(gè)表單組件的詳細(xì)代碼,確保通過axios調(diào)用后端接口來獲取省市區(qū)和街道數(shù)據(jù),并在選擇省市區(qū)時(shí)加載相應(yīng)的街道數(shù)據(jù),需要的朋友可以參考下2024-07-07