Vue如何在CSS中使用data定義的數(shù)據(jù)淺析
1、考慮一個問題, 后端傳來一個數(shù)據(jù), 比如是某個百分比, 需要在頁面做進(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)文章
element?tab標(biāo)簽管理路由頁面的項(xiàng)目實(shí)踐
本文主要介紹了element?tab標(biāo)簽管理路由頁面的項(xiàng)目實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08使用Bootstrap + Vue.js實(shí)現(xiàn)添加刪除數(shù)據(jù)示例
本篇文章主要介紹了使用Bootstrap + Vue.js實(shí)現(xiàn) 添加刪除數(shù)據(jù)示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-02-02Vue3+echarts5踩坑以及resize方法報錯的解決
這篇文章主要介紹了Vue3+echarts5踩坑以及resize方法報錯的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07vue3在自定義hooks中使用useRouter報錯的解決方案
這篇文章主要介紹了vue3在自定義hooks中使用useRouter報錯的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08Vue+ECharts實(shí)現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示
這篇文章主要介紹了Vue+ECharts實(shí)現(xiàn)中國地圖的繪制以及拖動、縮放和各省份自動輪播高亮顯示,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12構(gòu)建Vue大型應(yīng)用的10個最佳實(shí)踐(小結(jié))
這篇文章主要介紹了構(gòu)建Vue大型應(yīng)用的10個最佳實(shí)踐(小結(jié)),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11