最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Vue在CSS中使用data定义的数据代码解析
时间：2022-06-29 01:47:30 编辑：袖梨 来源：一聚教程网
本篇文章小编给大家分享一下Vue在CSS中使用data定义的数据代码解析，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。
1、考虑一个问题, 后端传来一个数据, 比如是某个百分比, 需要在页面做进度展示. 一般的情况都会在 CSS 中设置数据展示, 但是 CSS 中如何获取到后端传来的数据呢?
2、使用自定义属性: data-
通过 v-bind 将后端的数据绑定在自定义 HTML 属性上, 然后通过 CSS 的 attr() 函数获取该属性
最后页面展示
计算 right 部分失效了, 原因是 attr() 函数不能在 calc() 中使用! 怎么办呢?
3、自定义 CSS 变量
通过在 HTML 的 style 属性以 v-bind 的形式绑定定义的 CSS 变量, 继而在 CSS 中使用该变量达到效果
上面的代码省略了